jQuery StopPropagation问题

Question

如果有人在该div外面点击,我想关闭div.我有以下代码:

   $('body').click(function(e) {
        $('div.test').slideUp('slow');
    });
    $('div.test').live('click',function(e) {
        e.stopPropagation();
    });

但问题是当有人在div内部点击时,div本身正在关闭.我想防止这种情况.调试后我发现一个奇怪的东西,调试器首先击中$(body).click而不是$(div.test),我可以知道这个的原因吗？你能帮我解决这个问题吗？

Answer 1

问题在于您的使用live.

live是一种说法"将处理程序绑定到根元素并捕获源自与选择器匹配的元素的任何事件"的方式.这是一个简短的形式delegate.这是可能的,因为"冒泡":元素的事件也在元素的祖先上触发.

如果未另行指定,live请将事件处理程序绑定到document.body将首先触发事件处理程序,因为事件不会冒泡到document处理程序,其中e.stopPropagation()是.

最简单的解决方案是live改为click:

$('div.test').click(function(e) {

如果需要使用live,请引入容器元素,并在那里处理事件.我将使用delegate我喜欢它的语法,但live如果您愿意,可以使用:

$('#container').delegate('div.test', 'click', function(e) {
    e.stopPropagation();
});

处理事件#container并停止传播,因此事件永远不会到达body事件处理程序.