无法让 JS 进入冒泡事件

Question

我有这个小提琴中的结构：https ://jsfiddle.net/Arne651/s8wbeyh5/11/<ul id="ul">  <li class="test">    <p>      Some text    </p>  </li>  <li class="test">    <p>      Some text    </p>  </li>  <li class="test">    <p>      Some text    </p>  </li></ul>我在一个<ul>元素上有一个事件，在这个事件中我试图对<li>被点击的元素做一些事情。这个<li>元素包含一个<p>元素，事件似乎没有向上冒泡。let ul = $("#ul")ul.on("click", function(e) {    let clicked = $(e.target)    console.log(clicked)    if (clicked.hasClass("test")) {        console.log("li triggered")    }})我不想要所有<li>元素上的事件，因为列表可能会变得很长，而且单个事件感觉更整洁。

Answer 1

单击文本时，目标是 p 标签。

获取最接近的 li 可能不是执行此操作的最佳方法，但这是可行的。

ul.on("click", function(e) {

    let clicked = $(e.target).closest('li');

    console.log(clicked);

    if (clicked.hasClass("test")) {

        console.log("li triggered");

    }

});

Answer 2

你可以添加点击 li only 试试这个

let li = $("#ul li.test")

li.on("click", function(e) {

  console.log("li triggered");

})

我首先获取所有具有 calse 测试的 li，然后在其上添加监听器。