javascript - 特定属性上的 jquery .click() 函数，返回多个元素

Question

当我点击 <li data-link-url="..."> 时，我遇到了 jquery 和 .click() 函数的问题。元素，共享 data-link-url 属性。

这是我的 HTML 结构:

<nav class="fullListHover">
  <ul>
    <li class="oneHub">
      <a href="... /suppliers/technology.html"></a>
      <ul>
        <li data-link-url="... /templateA.html">
          <ul>
            <li data-link-url="... /templateB.html"></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>       
</nav>

这是我的 jquery click() 函数:

<script type="text/javascript">
  $("[data-link-url]").click(function(){
      window.location.href=$(this).attr("data-link-url")
  });
</script>

当我用 ".../templateB.html" 点击 li-tag 时，我被重定向到 ".../templateA.html "。 所以我调试了整个事情并记录了 $(this) 变量。当我点击 ".../templateB.html" 时，输出是:

.../templateB.html
.../templateA.html

看起来，.click() 函数运行了第二次。

如何只选择 templateB 或阻止点击功能再次运行？

P.S.:我希望我的问题是可以理解的。英语不是我的主要语言。

Answer 1

您的问题是因为您嵌套了具有 data-link-url 属性的 li 元素，因此点击处理程序为层次结构中的每个元素调用一次，作为事件使 DOM 冒泡。要解决此问题，请在事件处理程序中调用 stopPropagation():

$("[data-link-url]").click(function(e) {
    e.stopPropagation();
    window.location.href = $(this).data('link-url');
});