当前位置：文江博客话题详情

使用 jQuery 在 DIV 外部单击时隐藏 DIV，但允许传播事件

发布于 2024-12-02 07:00:56 字数 243 浏览 1 评论 0原文

我读过很多其他问题，涉及如何在单击外部时关闭 div，但我有一个复杂的问题，因为我有其他与 .live() 绑定的元素，

我想要发生的是如果我单击页面上的其他任何位置，div 应该消失，包括如果我单击“实时”元素。当我单击该活动元素时，我希望它的处理程序正常进行。

据我所知，处理关闭 div 的基本方法是将单击侦听器附加到或 $document，但这会阻止任何其他实时事件冒泡通过上述 body/doc 处理程序。有办法解决这个问题吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绻影浮沉 2024-12-09 07:00:56

在现场，事件按顺序从最前面到最后面冒泡。在“实时”元素的单击（它是 body 对象的直接/间接子元素）中，如果您不返回 false 或停止传播，它将向上冒泡到达文档的单击处理程序。通过实时附加文档的点击似乎不起作用。

在此处检查示例实现：http://jsfiddle.net/VHtSP/6/

$('div.menu').live('click', function(e) {
    e.stopPropagation();
    alert('click inside menu. will not propagate.');
    return false;
});

$(document).click(function() {
    alert('document click() handler.');
    // close the div
    $('div.menu').hide();
});

$('a').live('click', function() {
    alert('<a> click() handler');
    // .. your code to handle the live element's click
});

In live, events bubble up the ladder from front-most to back-most in that order. In your 'live' element's click (which is a direct/indirect child of your body object), if you don't return false or stop propagation, it will bubble up the ladder to reach the document's click handler. Attaching the document's click via live doesn't seem to work.

Check sample implementation here: http://jsfiddle.net/VHtSP/6/

$('div.menu').live('click', function(e) {
    e.stopPropagation();
    alert('click inside menu. will not propagate.');
    return false;
});

$(document).click(function() {
    alert('document click() handler.');
    // close the div
    $('div.menu').hide();
});

$('a').live('click', function() {
    alert('<a> click() handler');
    // .. your code to handle the live element's click
});

回复收藏 0 原文

~没有更多了~