2011-05-16 63 views
0

如果有人在该div外部单击,我想关闭div。我有以下代码:jQuery StopPropagation问题

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

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

回答

5

的问题是在你使用的live

live是一种“将处理程序绑定到根元素并捕获源于匹配选择器的元素上的所有事件”的方式。这是一个简短的delegate。这可能是因为“冒泡”:元素上的事件也会在元素的祖先上触发。

如果您没有另行指定,live会将事件处理程序绑定到documentbody上的事件处理程序将首先被触发,因为该事件不会冒泡到document处理程序,其中e.stopPropagation()是。

最简单的办法是改变liveclick

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

如果您需要使用live,引进一个容器元素,以及处理该事件出现。我将使用delegate,因为我喜欢它的语法,但你可以使用live如果您首选:

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

该事件在#container处理和传播停止,因此事件永远不会到达body的事件处理程序。

3

如果您还处理身体点击live()也会发生什么?

我相信实时点击处理程序不会以与标准点击相同的方式传播事件。见this documentation

+0

完美!它使用$('body')。live('click',function(e){}};感谢您的解决方案。但我很想知道它是如何工作的?它为什么现在起作用,为什么它以前不工作?为什么$('div.test')在这种情况下('点击'在此之前触发? – 2011-05-16 13:26:35

+0

看看寂寞的日子说了些什么,但我留下了选择接受你的答案;) – 2011-05-16 13:29:48

0

我相信,问题就出现了,因为你是设置单击处理程序<body>

我想同样的事情,而不是<p><body>,似乎很好地工作。

这里有一个相关的小提琴:
http://jsfiddle.net/seNXV/7/