无序列表中的Jquery函数

Question

我在无序列表中有列表项，它们通过jquery点击事件调用函数。问题是li正在调用它的函数然后调用父ul函数。我只想要使用id引用的函数调用。这是亲子问题吗？

<ul id="mainlist">
  <li id="item1">list1</li>
  <li id="item2">list2</li>
</ul>

Jquery的

$("#mainlist").click(function {
   someFunction();
  });
$("#item1").click(function {
  someOtherFunction();
 });

Answer 1

您只需要阻止事件传播到其祖先：

$("#item1").click(function (event) {
  event.stopPropagation();
  someOtherFunction();
});

或者，您可以通过检查其event.target属性来检查点击的元素（<ul>）以查看它是<li>还是id：

$("#mainlist").click(function (event) {
    switch (event.target.id) {
        case 'mainlist':
          someFunction();
          break;
        case 'item1':
          someOtherFunction();
          break;
        default:
          break;
    }
});

参考文献：

• JavaScript的：
  • Event.stopPropagation()。
• jQuery的：
  • Event.stopPropagation()。