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();
});

或者，您可以通过检查其 id [=42= 来检查单击的元素（event.target）以查看它是 <ul> 还是 <li> ]:

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

参考文献：

• JavaScript:
  • Event.stopPropagation().
• jQuery:
  • Event.stopPropagation().