Question

无论如何，当触摸特定子元素时，是否会停止父点击事件。

例如，在此示例中，我想记录点击蓝色的outer和点击红色时inner。

如何在内部div上停止外部事件触发？

＆＃13;

$("#outer").click(function(){
  console.log("outer");                 
});

//tried these but doesnt do anything
$("#inner").off();
$("#inner").unbind();

$("#inner").click(function(e){
  console.log("inner");                 
});

＆＃13;

#outer{
  background-color: blue;
  width: 500px;
  height: 700px;
}
#inner{
  background-color: red;
  width: 100%;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="outer">
  <div id="inner"></div>
</div>

＆＃13;

Answer 1

您可以致电stopPropagation以阻止事件冒泡并在#outer上触发侦听器：

＆＃13;

$("#outer").click(function(){
  console.log("outer");                 
});
$("#inner").click(function(e){
  e.stopPropagation();
  console.log("inner");                 
});

＆＃13;

#outer{
  background-color: blue;
  width: 500px;
  height: 700px;
}
#inner{
  background-color: red;
  width: 100%;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="outer">
  <div id="inner"></div>
</div>

＆＃13;

阻止点击处理程序触发子项

1 个答案: