将click方法应用于外部div而不是内部div

Question

在此示例中，我希望在单击黑色外部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中没有​​任何东西可以触发警报。我该怎么做？

（由于某种原因，内部按钮未显示在代码段中，此处为codepen链接：https://codepen.io/GuerrillaCoder/pen/Pmvmqx）

Answer 1

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

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

Answer 2

点击event.stopPropagation(); div：

时，您可以使用inner

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在click函数中检查事件目标等于外部

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

Answer 4

纯javascript解决方案，如果有人关心 - ））

＆＃13;

＆＃13;

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"); 
});

＆＃13;

#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;
}

＆＃13;

<div id="outer">

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

我认为$("#outer").on('click', function () { alert("triggered"); }).children().on('click', function (e) { e.stopPropagation(); }); 方法是最有用的解决方案。你只需要在外部div的子代上调用它：

java.lang.NullPointerException
    mx.sectur.job.NormalizeCities.executeInternal(NormalizeCities.java:32)

同时检查此Solution。

Answer 6

另一种方法：

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 7

如果父项或其子项触发了事件，您可以使用event.target检查事件：

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

   }
});

Answer 8

试试这个

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