Question

我的结构使用了几个包含锚标记的列表元素。基本上，我在list元素本身上有一个click处理程序，而在其中的anchor标记上有另一个click处理程序。但是，我遇到的问题是当我点击锚标签时，它会触发列表元素的点击处理程序。

＆＃13;

$(".myStructure").on("click", ".myLis", doSomeAction);
$(".myStructure").on("click", "#myLink2", doSomeAction2);

＆＃13;

<div class="myStructure">
  <li class="myLis">
    <a id="myLink">ABC</a>
  </li>
  <li class="myLis">
    <a id="myLink2">ABC</a>
  </li>
</div>

＆＃13;

任何人都能告诉我我能做什么，以便当我点击锚标签时它会调用我想要的方法吗？我似乎无法找到我能做的事情。

Answer 1

您可以从链接事件处理程序中调用event.stopPropagation()。

event.stopPropagation()

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

function doSomeAction2(event)
{
    //your code
    event.stopPropagation();
}

Answer 2

以下是一个工作版本：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="myStructure">
      <li class="myLis">
        <a id="myLink" href="#">ABC</a>
      </li>
      <li class="myLis">
        <a id="myLink2" href="#">ABC</a>
      </li>
</div>
</body>
<script type="text/javascript">
    $("#myLink").on("click", function(){
        console.log('hi')
    });
    $("#myLink2").on("click", function(){
        console.log('ho')
    });
</script>
</html>

Answer 3

是的，有一个很好的解决方案。您可以将元素事件侦听器绑定到根节点，并使用事件冒泡

监听它的事件

$(".myStructure").each( function() {
    // Binds the event only once to the root element
    this.addEventListener("click", function(event) {

       // The critical point is here!!!
       var elem = $(event.target);

       // and after you have the element, it is easy to check which it was
       if(elem.hasClass("myLis")) {
          alert("List element click!");
       }
       if(elem.prop("tagName")=="A") {
          alert("A element was clicked!");
       }                          
    });
});

您可以使用此模式执行更复杂的操作，并且只有一个事件处理程序将操作分派给正确的函数。

Testbench在这里http://jsfiddle.net/Lh5omcdn/

编辑：此解决方案的难点在于您必须从事件目标中检查您应该执行的操作。如果目标没有属性，类或其他元信息，那么您不知道该怎么做。只有一个事件处理程序的优势有它的成本。

但是，如果您使用某种生成HTML的模板引擎，这种缺点可能会带来好处。然后，每次重新将新HTML分配给“myStructure”元素时，都不必将事件重新绑定到HTML内容。

在另一个内部单击处理

3 个答案: