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

标签 jquery event-propagation

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

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

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

最佳答案

在现场,事件按顺序从最前面到最后面冒泡。在“实时”元素的单击(它是 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
});

关于jquery - 使用 jQuery 在 DIV 外部单击时隐藏 DIV,但允许传播事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7264483/

相关文章:

javascript - 同一页面上多个 nivo slider 的不同延迟

javascript - jQuery UI Droppable,不通过特定 DIV 传播事件

javascript - 什么时候使用 stopPropagation() 的好习惯?

javascript - 如何从js或jquery隐藏div

jquery - 如何优化 jquery 数据表以有效加载大数据(10k-50k 行)?

javascript - 如何停止运行 Jquery 函数?

javascript - d3 : disabled "dblclick.zoom" default behaviour returns after using custom zoom

jquery mobile - 弹出窗口中的自定义选择菜单

javascript - 在 Kendo Grid 上下降时在两者之间插入记录

javascript - document.getElementByClassName 不工作但 document.getElementById 工作