无法让 JS 进入冒泡事件

Question

我有这样的结构fiddle：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

你可以在 li 上添加点击试试这个

let li = $("#ul li.test")
li.on("click", function(e) {
  console.log("li triggered");
})

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

Answer 2

点击文字时，目标是p标签。

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

ul.on("click", function(e) {
    let clicked = $(e.target).closest('li');
    console.log(clicked);
    if (clicked.hasClass("test")) {
        console.log("li triggered");
    }
});

无法让 JS 进入冒泡事件

Can't get JS to bubble event

javascript

jquery

dom-events

event-propagation