javascript - CustomEvent 监听器回调触发两次？

Question

我创建了一个自定义元素:

const templ = document.createElement('template');
templ.innerHTML = `
<span><slot></slot></span>
`;

class SlideButton extends HTMLElement {

    constructor() {
        super();

        // Attach a shadow root to the element.
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.appendChild(tmpl.content.cloneNode(true));
        this.span = shadowRoot.querySelector('span');

        this.triggerEvent = new CustomEvent("trigger", {
            bubbles: false,
            cancelable: false,
        });

        this.initMouseEvents();
    }

    initMouseEvents() {
        this.span.addEventListener('mousedown', (e) => {

            //Watch and calculate slide amount..
            this.addEventListener('mousemove', this.slide, false);

        });

        //When button is released...
        document.addEventListener('mouseup', handleMouseUp = (e) => {

            this.removeEventListener('mousemove', this.slide, false);
            document.removeEventListener('mouseup', handleMouseUp);

            //If slided enough, dispatch event...
            if (Math.abs(this.slideAmount) > (this.maxSlide * 0.75)) {
                console.log('firing event');
                this.dispatchEvent(this.triggerEvent);
            }
            //Reset button to normal state...

        }, false);
    }
}

我的代码中的其他地方..

class SpotLightModal {

    //Constructor..
    //code..
    //code..

    init() {
        this.actions.querySelector('slide-button[type="den"]').addEventListener('trigger', e => {
            console.log(e);
            console.log('den');
            //Do stuff..
        });
    }

    //code...
    //code...

}

一切都按预期工作，除了事件监听器中的回调运行两次并且输出为:

firing event
CustomEvent {...}
den
CustomEvent {...}
den

两者e.stopPropagation()和e.preventDefault()没有效果，尝试使用它们没有任何效果..

我已编辑以包含 this.span并将“mouseup”事件监听器移到“mousedown”事件监听器之外，但这不起作用，事实上在记录 this 时，现在，它给出了另一个不同的元素(同一类型的 <slide-button> ，页面上的第一个元素)，“mouseover”监听器不会被删除，并且事件不会被触发。

我在这里做错了什么吗？或者我到底错过了什么？

提前致谢..

Answer 1

如果其他人遇到类似问题，请尝试使用:

event.stopImmediatePropagation() 像这样进入你的回调函数

window.addEventListener('message', (event) => {
  event.stopImmediatePropagation();
  console.log('detail:', event.detail);
})

就我而言，这似乎可以解决问题，但它绝对是 super 黑客，如果需要 super 可靠，建议尝试找出问题的根本原因。

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation