Question

假设我为HTML div提供了一个简单的点击事件。如果我点击div它应该触发一个fadeToggle。

在那个div中，我得到另一个div与另一个触发器。在那次点击事件中，它应该做一些事情，但不是做事件而是触发第一个事件。

如果我想触发event2，如何阻止事件1触发？

只有当我没有在第二个事件上按下clickevent时，Event1才会触发，其他一切都应该像往常一样触发。

感谢您的时间

HTML

<div id="1">
     Event 1
     <div id="2">
         <div id="3">
            but here is something as well event2
          </div>
     </div>
</div>

的JavaScript

$("#1").click(function() {
   $(this).slideToggle();
});


$("#3").click(function() {
   $(this).css("background-color", "blue");
});

小提琴：http://jsfiddle.net/VLcxJ/

Answer 1

$("#3").click(function(e) {
    e.stopPropagation();
    $(this).css("background-color", "blue");
});

之后，点击＃3将无法达到＃2或＃1

Answer 2

使用event.stopPropagation();：

$("#e3").click(function(event) {
   event.stopPropagation();
   $(this).css("background-color", "blue");
});

在此处查看：http://jsfiddle.net/bYn22/

来自jQuery API的注释（我无法更好地解释）：event.stopPropagation（）＆gt; 阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

请注意，您的ID不能以数字开头：）

Answer 3

$("#3").click(function(event) {
   event.stopPropagation();
   $(this).css("background-color", "blue");
});

添加小提琴：http://jsfiddle.net/VLcxJ/1/

Answer 4

这是解决方案

        $("#1").click(function() {
            $(this).slideToggle();
        });


        $("#3").click(function(event) {
           event.stopPropagation();
            $(this).css("background-color", "blue");
        });

http://jsfiddle.net/tR7h9/3/

Jquery禁用div的click事件

4 个答案: