如何防止子元素发生单击？

Question

在子元素而不是父元素上接收单击事件时，我遇到了问题。目前，单击事件发生在span元素上，而不是链接元素上。

我搜索了几个类似的问题，并找到了关于EventBubling和如何防止它的信息，但不幸的是，它对我没有用。

HTML

        <div class="container">
            <div class="list">
                <a href="#" data="data-1">
                    <span>Text 1</span>
                </a>
            </div>
            <div class="list">
                <a href="#" data="data-2">
                    <span>Text 2</span>
                </a>
            </div>
            <div class="list">
                <a href="#" data="data-3">
                    <span>Text 3</span>
                </a>
            </div>
        </div>

JS

const list = document.querySelectorAll('.list > a');

Array.from(list).forEach((el) =>
    el.addEventListener('click', (e) => {
        //e.preventDefault();
        e.stopPropagation();
        const dataAttr = e.target.getAttribute('data');
        console.log(dataAttr);
    })
);

Answer 1

使用e.currentTarget而不是e.target。

e.currentTarget.getAttribute('data');

请参阅：currentTarget属性和目标属性在JavaScript中的确切区别是什么？

如上述答覆所述：

target是触发事件的元素(例如，用户单击了阻塞引号)，currentTarget是将事件侦听器附加到的元素。

以下工作代码

​

const list = document.querySelectorAll('.list a');
//console.log(list);

Array.from(list).forEach((el) =>
  el.addEventListener('click', (e) => {
    //e.preventDefault();
    e.stopPropagation();
    const dataAttr = e.currentTarget.getAttribute('data');
    console.log(dataAttr);
  })
);

<div class="list">
  <a href="#" data="data-1">
    <span>Text 1</span>
  </a>
</div>
<div class="list">
  <a href="#" data="data-2">
    <span>Text 2</span>
  </a>
</div>
<div class="list">
  <a href="#" data="data-3">
    <span>Text 3</span>
  </a>
</div>

​

Answer 2

传播的工作方式与你所认为的不同。

您想要的是始终获得.closest() a-标记，而不管您单击了哪个子元素。然后你得到它的数据属性

​

const list = document.querySelectorAll('.list > a');

Array.from(list).forEach((el) =>
    el.addEventListener('click', (e) => {
        //e.preventDefault();
        e.stopPropagation();
        const dataAttr = e.target.closest('a').getAttribute('data');
        console.log(dataAttr);
    })
);

<div class="container">
  <div class="list">
    <a href="#" data="data-1">
      <span>Text 1</span>
    </a>
  </div>
  <div class="list">
    <a href="#" data="data-2">
      <span>Text 2</span>
    </a>
  </div>
  <div class="list">
    <a href="#" data="data-3">
      <span>Text 3</span>
    </a>
  </div>
</div>

​

Answer 3

由于您要将事件处理程序添加到除了span元素之外的任何元素中，所以我将假设您实际上不希望阻止对span的单击。相反，您希望知道单击哪个链接，即使单击是在跨度上。

使用currentTarget而不是target。

currentTarget将为您提供事件处理程序绑定到的元素，而不是实际收到单击的元素。