Question

我有一个包含另一个div的div。如果用户单击内部div，我只希望执行附加到此元素的eventhandler。现在首先执行内部元素的事件处理程序，然后执行外部元素的事件处理程序。有没有办法改变这个？

    <html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script>
     $(document).ready(function(){
       $("#containerElement").click(function(event){
         alert("This comes from container");
       });

      $("#innerElement").click(function(event){
         alert("This comes from inner element");
       });
     });
   </script>


   <div id="containerElement" >
   This is the container
     <div id="innerElement" >
   This is the inner element


   </div>

   </div>
  </body>
</html>

Answer 1

你可以stop the propagation：

$("#innerElement").click(function(event){
    alert("This comes from inner element");
    event.stopPropagation();
});

Answer 2

添加event.stopPropagation();

$("#innerElement").click(function(event){
    alert("This comes from inner element");
    event.stopPropagation();
});

Answer 3

从处理程序返回false将阻止冒泡（除其他外）：

$("#innerElement").click(function(event){
     alert("This comes from container");
     return false;
});

Answer 4

将event.stopPropagation()添加到innerElement事件处理程序中。有关详细信息，请参阅jQuery docs。

$("#innerElement").click(function(event){
    alert("This comes from inner element");
    event.stopPropagation();
});

Answer 5

如上所述：

http://jsbin.com/avikol/2/

如果嵌套元素触发事件，则不要让容器处理它

5 个答案: