你可以用冒泡来帮助自己:

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

你可以使用event. currentarget。它只会点击得到事件的元素。

目标= e => 控制台日志(e . currentTarget); 的; <ul onClick={target}类 < li > < p > <i类 < / p > < / li > < /德>

// if its li get value document.getElementById('li').addEventListener("click", function(e) { if (e.target == this) { UodateNote(e.target.id); } }) function UodateNote(e) { let nt_id = document.createElement("div"); // append container to duc. document.body.appendChild(nt_id); nt_id.id = "hi"; // get conatiner value . nt_id.innerHTML = e; // body... console.log(e); } li{ cursor: pointer; font-weight: bold; font-size: 20px; position: relative; width: 380px; height: 80px; background-color: silver; justify-content: center; align-items: center; text-align: center; margin-top: 0.5cm; border: 2px solid purple; border-radius: 12%;} p{ cursor: text; font-size: 16px; font-weight: normal; display: block; max-width: 370px; max-height: 40px; overflow-x: hidden;} <li id="li"><p>hi</p></li>

如果e.target与这个元素相同，则没有单击后代。

$ (' .foobar ')。On ('click'，函数(e) { If (e.target !== this) 返回; Alert('点击foobar'); })； .foobar { 填充:20 px;背景:黄色; ｝ 跨度{ 背景:蓝色;颜色:白色;填充:8 px; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <div class='foobar'> .foobar (alert) <span>child (no alert)</span> < / div >

我的情况类似，但这是当你有几个foobar-s，你想关闭只有一个-每次点击:

查找父case

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

查找子案例

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

我没有得到工作的公认答案，但这似乎做的把戏，至少在香草JS。

if(e.target !== e.currentTarget) return;