将点击方法应用于外部 div 但不是内部 div [重复]答案

【问题标题】：Apply click method to outer div but not inner div [duplicate]将点击方法应用于外部 div 但不是内部 div [重复]
【发布时间】：2017-10-28 17:59:56
【问题描述】：

在此示例中，我希望在单击黑色外部 div 时触发警报，而不是在单击内部 div 内的任何内容时触发警报。

目前，当我单击内部按钮时，它会触发警报。

$("#outer").click(function() {
  alert("triggered");
});

#outer{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inner{
  background-color: #fff;
width: 300px;
height: 300px;
  text-align: center;
}

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

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

我不希望在内部 div 内触发警报。我该怎么做？

（由于某种原因，sn-p 中没有显示内部按钮，这里是 codepen 链接：https://codepen.io/GuerrillaCoder/pen/Pmvmqx）

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你只需要检查元素的id，因为inner是子元素，它总是会将事件传播到父元素（outer）。

$("#outer").click(function(event) {
 if(event.target.id=="outer"){
  alert("triggered");
 }
});

【讨论】：

【解决方案2】：

点击inner div时可以使用event.stopPropagation();：

$("#outer").click(function() {
    alert("triggered");
});
$('#inner').click(function (evt) {
    evt.stopPropagation();
});

#outer{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#inner{
    background-color: #fff;
    width: 300px;
    height: 300px;
    text-align: center;
}

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

【讨论】：

【解决方案3】：

在点击函数中检查事件目标是否等于外部

    $("#outer").click(function(e) {
        if (e.target.id === "outer"){
            alert("triggered");
         }
    });

【讨论】：

【解决方案4】：

我认为event.stopPropagation() 方法将是最有用的解决方案。你只需要在外部div 的孩子上调用它：

$("#outer").on('click', function () { 
   alert("triggered");
}).children().on('click', function (e) {
    e.stopPropagation();
});

也可以查看Solution。

【讨论】：

【解决方案5】：

纯 javascript 解决方案，如果有人关心的话 -))

var inner = document.getElementById("inner");
var btn = inner.querySelector("button");
document.getElementById("outer").addEventListener("click", function(e) {
  (e.target == btn) || (e.target == inner) ? console.log("click triggered from"+ e.target+". so we do not alert anything") : alert("something"); 
});

#outer{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inner{
  background-color: #fff;
width: 300px;
height: 300px;
  text-align: center;
}

<div id="outer">

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

【讨论】：

【解决方案6】：

另一种方法：

$("#outer").click(function() {
  alert("triggered");
});
$("#inner").click(function(e) {
 e.stopPropagation() 
});

#outer{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inner{
  background-color: #fff;
width: 300px;
height: 300px;
  text-align: center;
}

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

【讨论】：

【解决方案7】：

您可以使用 event.target 来检查事件是由父级还是由其子级触发：

$("#outer").click(function(e) {
  if( e.target !== this ) {
       return;
   } else {
       alert("triggered");

   }
});

【讨论】：

【解决方案8】：

试试这个

$("#outer").click(function(e) {
  e.target.id=='outer'?alert('triggered'):void(0);
});

【讨论】：