如何阻止在子元素上触发事件而不是添加指针事件？

Question

如何防止元素内的元素触发元素内的元素？ 有没有比添加指针事件更好的方法？

const selectors = {
    scrollContainer: '[data-scroll-container]',
    scrollTrigger: '[data-scroll-trigger]',
    scrollNext: 'data-next',
    scrollBack: 'data-back',
};

/**
 * Main
 */

const scrollTrigger = [...document.querySelectorAll(selectors.scrollTrigger)];


const handleScroll = ({ target }) => {
    console.log(target);
    if (target.hasAttribute(data-next)) {
        console.log(target)
    }
};

<button data-scroll-trigger data-next>
       <svg>//some svg here//</svg>
</button>

Answer 1

从提供的代码很难确定，感觉可能存在一些设计问题，但我会简单地将处理程序添加到最外面的容器上，然后根据需要使用currentTarget属性或target属性。

区别在于target是触发事件的元素，而currentTarget是附加了处理程序的元素。 子元素会将事件传播到父处理程序。 如果要获取父级，请使用currentTarget 。

有很多方法可以测试元素触发是否是处理程序附加到的元素，但这里有一个非常基本的演示：

 document.querySelector('#outer').addEventListener('click', (e) => { console.log(e.currentTarget.== e;target). if (e.currentTarget.== e;target) { e;preventDefault(); } });

 #outer { display: inline-block; width: 200px; height: 200px; background: red; } #inner { display: inline-block; width: 100px; height: 100px; background: blue; }

 <a id="outer" href="http://google.com"> <a id="inner" /> </a>