Question

jquery怎么在父元素事件中禁止子元素的事件？

<div style="height:200px;background-color:green;" id="green">
<div style="height:100px;background-color:orange;" id="orange">
</div>
</div>

$(function(){

$("#green").click(function(event){
alert("green click");
event.stopImmediatePropagation();
});
$("#green").click(function(){
alert("green click2");
});
$("#orange").click(function(){
alert("orange click");
});
});

其中
event.stopImmediatePropagation();
只能禁止green click2事件，用什么方法还可以禁止它的所有子元素的click事件（orange click）?

Answer 1

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery，编写问题基础代码。

2、index.html中，将<script>标签中的orange的点击事件中，修改jquery代码为：

$("#green").click();e.stopPropagation();

3、浏览器运行index.html页面，此时点击橘色方块发现成功禁止了其它子元素的点击事件，只弹出了“green click”。

Answer 2

3种方法
1、在父元素事件的function中加if(event.target==this){ }
2、子元素事件function最后加event.stopPropgation（）；// 阻止事件冒泡
3、简单点，直接在子元素事件function最后加return false；// 阻止事件冒泡和默认操作

Answer 3

因为orange click事件比green click事件先触发，所以后面的事件不能禁止前面的事件触发吧。

所以建议你在orange事件处理函数里判断要不要执行函数体里的语句。

$("#orange").click(function(){
    if (/* 你想这样做应该有你的条件吧 */) {
      alert("orange click");
    }
  });
});

Answer 4

$(function(){
$("#green").click(function(event){
alert("green click");
});
$("#orange").click(function(event){
alert("orange click");
return false;
});
});