单击 EventListener 单击 div 中包含的 <a> 时禁用 EventListener 触发器

Question

问题： 我正在使用名为“listree”的轻型包构建嵌套树，但每当我将 link 放入列表中的父元素时遇到错误。

错误单击 link 时，会触发单击事件以展开树（因为 link 包含在 div 需要此事件侦听器）并将流程中断到 link 重定向。

问题在具有点击 EventListener 的父项中单击 link 时如何禁止触发此事件触发器。

<div class="listree-submenu-heading">Settings<a href="https://www.google.com"> A link not working</a></div>

Answer 1

您可以使用 event.stopPropagation() 然后将 id 添加到 link 和事件侦听器以在单击 link 时触发。

请参阅下面的代码段：

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/listree/dist/listree.min.css"/>
    <title>LisTree</title>
  </head>
  <body>
    <ul class="listree">
        <li>

            <div class="listree-submenu-heading">Settings<a id="my-link" href="https://www.google.com"> A link not working</a></div>
            <ul class="listree-submenu-items">
                <li>
                    <div class="listree-submenu-heading">Personal Settings</div>
                    <ul class="listree-submenu-items">
                        <li><a href="">Password Settings</a></li>
                        <li><a href="">Viewing Preferences</a></li>
                    </ul>
                </li>
                <li>
                    <div class="listree-submenu-heading">Org Settings</div>
                    <ul class="listree-submenu-items">
                        <li><a href="">Teams</a></li>
                        <li><a href="">Billing</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <script src="https://unpkg.com/listree/dist/listree.umd.min.js"></script>
    <script>
        listree();
        //add handler function
      function handler(event) {
        // stops parent events from being triggered
        event.stopPropagation();       
      }
      //add listner for click
      document.getElementById("my-link").addEventListener('click', handler, false);
    </script>
  </body>
</html>

另请查看此答案here

单击 EventListener 单击 div 中包含的 <a> 时禁用 EventListener 触发器

Disabling EventListener trigger when clicking <a> contained within div with click EventListener

html

javascript

events

dom-events