将点击方法应用于外部 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）

- Guerrilla

Answer 1

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

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

- Jayakrishnan

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

- Koby Douek

Answer 3

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

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

- Adharsh M

Answer 4

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

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

还可以查看这个解决方案。

- Oghli

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

- marmeladze

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

- Bhuwan

Answer 7

您可以使用 event.target 来检查事件是由父元素还是其子元素触发的:

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

   }
});

- Vibhanshu

Answer 8

试试这个

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

- Rijin Mk