CustomEvent listener callback is firing twice?

Question

I've created a custom element:

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);
    }
}

Somewhere else in my code..

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...

}

Everything works as expected except that the callback in the event listener is runs twice and the output is:

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

Both e.stopPropagation() and e.preventDefault() have no effect and trying to use them did nothing..

I've edited to include this.span and also moved the "mouseup" event listener outside the "mousedown" event listener but that didn't work, infact when logging this, now, it gives another different element (of the same kind, <slide-button>, the first on the page), the "mouseover" listener doesn't get removed, and the event isn't fired.

Am I doing something wrong in here? or what am I missing exactly?

Thanks in advance..

I think this is happening because you are nesting events within events. — Chris Hemmens, Sep 16 '19 at 16:03
@ChrisHemmens I tried ordering them differently but nothing worked.. other orders cause the event to fir multiple times or not at all — Nasa, Sep 16 '19 at 16:07

score 11 · Answer 1 · answered Feb 15 '21 at 06:53

If anyone else is having a similar problem try using:

event.stopImmediatePropagation() into your callback function like so

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

In my case this seemed to do the trick, but it's definitely super hacky and would recommend trying to find out the root cause of your issue if it needs to be super reliable.

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

score 1 · Answer 2 · answered Mar 13 '22 at 00:37

In my case, I was using event bus to dispatch custom event which will trigger a callback function in which the double events happened.

Initially, the custom event listener was in the constructor()

constructor() {
    EventBus.addEventListener('someEvent', this.doSomething);
}

And I stopped seeing double events once I moved that line to connectedCallback():

connectedCallback() {
   EventBus.addEventListener('someEvent', this.doSomething);
}

Emiel Zuurbier · Answer 3 · 2019-09-16T19:21:47.020

The problem lies in the nesting of your code.

First you add the first mousedown event listener which will trigger on when the mouse is clicked and not released.

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

Then inside of your mousedown event listener you listen for the mouseup event on the document.

document.addEventListener('mouseup', handleMouseUp = (e) => { ...

So now, whenever you click both the mousedown and the mouseup will be triggered. Even when you remove the event listener inside the mouseup event listener. The code inside there is already executing.
That is what causes your code to fire the CustomEvent twice.

Prevent the nesting of event listeners, except when one would rely on the other. Like in the mousedown event listener where you need to add the mousemove event listener. Now instead of nesting add another event listener that listens to mouseup adjecent to the mousedown event listener. Remove the mousemove event there. Example below:

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,
        });

    }

    connectedCallback() {

        // It's preferred to set the event listeners in the connectedCallback method.
        // This method is called whenever the current element is connected to the document.
        this.initMouseEvents();

    }

    initMouseEvents() {

        // Bind slider-button as this context to the slide method.
        // In case you use the this keyword inside of the slide method
        // you would need to do this to keep using the methods of this class.
        const slide = this.slide.bind(this);

        // Create a toggle to indicate that the slide-button has been clicked so that ONLY then the event listeners will be added.
        let targetIsClicked = false;

        // Mouse is clicked, mousemove added.
        document.addEventListener('mousedown', (e) => {

            // Check if this button has been clicked.
            const slideButton = e.target.closest('slide-button');
            if (slideButton === this) {

                // Toggle true and add mousemove event.
                targetIsClicked = true;
                document.addEventListener('mousemove', slide, false);
            }

        });

        // Mouse is released, remove mousemove and fire event.
        document.addEventListener('mouseup', (e) => {

            // Only do something if this button has been clicked in the mousedown event.
            if (targetIsClicked === true) {
                document.removeEventListener('mousemove', slide, false);

                // Reset toggle value.
                targetIsClicked = false;

                //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...

            }

        });

    }
}

Edit

I've changed the event listener's target to document. You explained that you want the mousemove and mouseup events to work when triggering them outside the button.

In the mousedown I check if the current target that has been clicked is in fact this button. And if so the targetIsClicked value will toggled to indicate that the correct button has been clicked.

In the mouseup event first check if the targetIsClicked is true. Meaning you clicked this button and execute the rest of your code.

Although, if you'd have multiple <slide-button> elements there would be multiple mousedown, mousemove and mouseup listeners attached to the document, which could create some weird outcomes.

Note

I've moved the this.initMouseEvents() function call to the connectedCallback() method. It is good practice to do this because now you are interacting with the lifecycle of the custom element. Add the event listeners in connectedCallback() when the element is created and remove event listeners in disconnectedCallback() when the element is removed. The element itself triggers these methods, so you don't have to call them.

this.span is a shadow Dom element inside my custom element (it's the part that's supposed to slide) — Nasa, Sep 16 '19 at 16:48
Isn't attaching the "mouseup" event to "this" will cause it to fire only when the mouse is released while it is on the element? I had this before but I want it to work also if the mouse is released elsewhere that's why I added the listener to the document... Will try your example soon when I'm home — Nasa, Sep 16 '19 at 16:51
Could you modify your code so that it includes the `` element in your Shadow DOM? And yes, using `this` will only trigger it on the element. So maybe `document` is a better candidate. But I will wait for your code additions before altering the answer. — Emiel Zuurbier, Sep 16 '19 at 17:38
I've edited my answer and tried to explain most things. Please check it out and let me know if it's of any help. — Emiel Zuurbier, Sep 16 '19 at 19:22
unfortunately no luck, following you example: testing the button first time it works fine (the button itself, slides good and resets at release), however, the event listener still runs twice.. and testing it for a second time causes a wrong behaviour, "mousemove" isn't removed and event isn't fired :/ — Nasa, Sep 17 '19 at 08:14
Hmmm, I've tried to fix your jsfiddle but my solutions does not seem to work. I'm out of idea's. — Emiel Zuurbier, Sep 17 '19 at 19:55

score 0 · Answer 4 · answered May 29 '20 at 20:00

There's a "bubbles" option that you can set to false, which should eliminate the mouse-down/up bubbling phases:

var evt = new CustomEvent(name, {
    detail : data,
    bubbles: true, // <-- try setting to false
    cancelable: true
});

document.dispatchEvent(evt);

CustomEvent listener callback is firing twice?

4 Answers4

Edit

Note