Javascript 对外部div而不是内部div应用click方法

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

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

$（“#外部”）。单击（函数（）{
警报（“触发”）；
});
#外部{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#000；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#内在的{
背景色：#fff；
宽度：300px；
高度：300px；
文本对齐：居中；
}

内部按钮
在单击功能中，检查事件目标是否等于外部目标

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

您可以使用
event.stopPropagation（）单击内部
div时：


$（“#外部”）。单击（函数（）{
警报（“触发”）；
});
$（“#内部”）。单击（函数（evt）{
evt.stopPropagation（）；
});
#外部{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#000；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#内在的{
背景色：#fff；
宽度：300px；
高度：300px；
文本对齐：居中；
}

内部按钮
您只需要检查元素的id，因为内部元素是子元素，它将始终将事件传播到父元素（外部）

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


var-inner=document.getElementById（“inner”）；
var btn=内部.querySelector（“按钮”）；
document.getElementById（“外部”）.addEventListener（“单击”），函数（e）{
（e.target==btn）| |（e.target==internal）？console.log（“从“+e.target+”触发的单击。因此我们不发出任何警报”）：警报（“某些东西”）；
});
#外部{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#000；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#内在的{
背景色：#fff；
宽度：300px；
高度：300px；
文本对齐：居中；
}

内部按钮
另一种方法：


$（“#外部”）。单击（函数（）{
警报（“触发”）；
});
$（“#内部”）。单击（功能（e）{
e、 停止传播（）
});
#外部{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#000；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#内在的{
背景色：#fff；
宽度：300px；
高度：300px；
文本对齐：居中；
}

内部按钮
我认为
event.stopPropagation（）
方法将是最有用的解决方案。您只需在outer div的子级上调用它：

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

同时检查此项。
您可以使用event.target检查事件是否由父级或其子级触发：

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

   }
});

试试这个

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

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