在处理多个堆叠的div时，jquery中的click（）函数如何工作？

Question

使用多个堆叠的div时，jquery中的click（）函数如何工作？

我在主div中有一个主div和另一个div，当我点击div里面时，它也被认为是主div上的一个点击，但我不想要那个，我希望它只考虑点击内部div。

<div id="main"><div id="inner"></div></div>

让我们说主要的div是一个更大，而内在的div只是一个小方块，当我点击内部div（小方块）我不希望它触发任何就好像我点击主要div 。我该如何操纵？再次感谢！

Answer 1

事件从被点击的事件中通过其所有祖先冒出来。处理该事件的任何祖先都将触发其处理程序。

您需要做的是调用event.stopPropagation()以防止事件冒泡到其祖先元素。

$('#inner').click(function(evt) {
    evt.stopPropagation();
    // your code
});

• http://api.jquery.com/event.stopPropagation/

另一种选择是在处理程序的末尾return false;。

$('#inner').click(function(evt) {
    // your code
    return false;
});

您可以在此处进行测试： http://jsfiddle.net/ZpeYr/

Answer 2

$('#inner').click(function() {  
  alert('clicked inner div'); // do something
});

你可以使用css id来调用你的内部div。