Cancel other trigger events attached to element

Question

I have an element that has numerous event triggers attached to it.

How do I cancel all of those events (without editing the code of those triggers) and add a new one.

So far, I have tried this without luck:

$(document).ready(function() {
    $( document ).on( 'click', '#element', function(e) {

        $(this).off();

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        // now that it's cancelled, do NEW stuff below
        alert('test');
    });
});

here is a stack overflow post which lists the order that events are fired , but this can vary from browser to browser, if this element has multiple events attached, it could be that one of the other events is firing before click, (https://stackoverflow.com/questions/282245/what-is-the-event-precedence-in-javascript) — Ryan Wilson, Mar 26 '18 at 12:45
Isn't the problem that you are trying to unbind during the click - therefore if it already has a different click event, that would be fired - you should unbind in the document ready: `$("#element").off();` before you bind your new click event — Pete, Mar 26 '18 at 12:47
@Pete I tried to move `.off()` outside of the click event function targeting the element and it still didn't cancel all the events unfortunately. — Henrik Petterson, Mar 26 '18 at 12:51
Is that because the element is dynamically created - if so, you probably want to move the off to were the element is added to the dom or use a delegated off — Pete, Mar 26 '18 at 12:51
Does your script get run before the other scripts that bind events - if so, you need to make sure that yours is the last script to run - try putting it in a window.load instead just to see (if everything else is on document ready, the window.load will run last) — Pete, Mar 26 '18 at 12:53

Sagar Jajoriya · Answer 1 · 2018-03-26T13:00:04.240

0

Clone the element for remove all event listener and replace the element with new cloned element.

$(document).ready(function() {
    $( document ).on( 'click', '#element', function(e) {
        var clonedElem = $(this).clone();
        $( this ).replaceWith( clonedElem )
    });
});

edited Mar 26 '18 at 13:00

answered Mar 26 '18 at 12:45

Sagar Jajoriya

2,377
1
9
17

1

Interesting *but* isn't this quite a desperate solution? There surely must be a way to properly cancel the events without cloning the element. ;) – Gary Woods Mar 26 '18 at 12:46
Not know the proper way to do that. But somewhere I read that this is the fastest way to remove all event listeners from an element. – Sagar Jajoriya Mar 26 '18 at 12:59

score -2 · Answer 2 · answered Mar 26 '18 at 12:47

-2

your code should do it

$(this).off()

removes all event listeners. However, you want to check if 'this' is really the element you want to address. In your code 'this' would be the Window object, not #element

answered Mar 26 '18 at 12:47

Eriks Klotins

4,042
1
12
26

In this instance $(this) is referring to the element as it is inside it's click event. This is the correct code and it doesn't work in it's current context. – Ryan Wilson Mar 26 '18 at 12:48
1

this is just plain wrong - in the code above, as the function is not an arrow function, this would be passed in as the object that has been clicked - in this case #element – Pete Mar 26 '18 at 12:49

Cancel other trigger events attached to element

2 Answers2