无法让 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) {&nbsp; &nbsp; let clicked = $(e.target).closest('li');&nbsp; &nbsp; console.log(clicked);&nbsp; &nbsp; if (clicked.hasClass("test")) {&nbsp; &nbsp; &nbsp; &nbsp; console.log("li triggered");&nbsp; &nbsp; }});

Answer 2

你可以添加点击 li only 试试这个let li = $("#ul li.test")li.on("click", function(e) {&nbsp; console.log("li triggered");})我首先获取所有具有 calse 测试的 li，然后在其上添加监听器。