CODEWITHSUNDEEP
javascript
user2832928
user2832928

Reputation: 69

Prevent all javascript events from firing

I am working on a firebug like javascript element selector, but cannot figure out how to stop all JavaScript events from firing when clicked. The firebug lite plugin (https://getfirebug.com/firebuglite) is doing exactly what I want, but cannot figure out what they are doing. Any help would be appreciated.

Senario:

I have tried the following with no luck:

function stopEvents(el){

    for(var key in window) {
        if (key.indexOf("on") == 0)
            el.addEventListener(key.substr(2), stop, false);
    }
}

function StopEvent(pE)
{
    stopEvents(pE);

    if (!pE)
     if (window.event)
       pE = window.event;
     else
       return;
  if (pE.cancelBubble != null)
    pE.cancelBubble = true;
  if (pE.stopPropagation)
     pE.stopPropagation();
  if (pE.preventDefault)
     pE.preventDefault();
  if (window.event)
     pE.returnValue = false;
  if (pE.cancel != null)
     pE.cancel = true;
}

EDIT:

$('.somediv').on("click", function(e){
     //Stop bubbling and propagation
     StopEvent(e);

     //EDIT: Still not working with this
     e.stopImmediatePropagation();

     //RUN only my code here
     console.log("My code is running still");

     return false;
});

If there is another library such as YUI binding events to the same DOM element. It will fire there event after mine. I cannot seem to hijack the event to stop this from happening.

EDIT:

I cannot use disabled because I need to be able to fire my event. If I did the following, I wouldn't be able to fire the above event. I cannot attach a parent event either because the DOM will stop firing all events on the Tree for that node.

$('.somediv').on("mouseover", function(e){
     $(this).attr("disabled", "disabled"); 
});

EDIT:

The events I want to disable are already created before my script runs. These events could be any javascript library such as YUI, Dojo, jQuery, JavaScript etc...

Upvotes: 6

Views: 7518

Answers (3)

ttt
ttt

Reputation: 6809

event.stopImmediatePropagation() keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

Example:

$( "p" ).click(function( event ) {
  event.stopImmediatePropagation();
});

$( "p" ).click(function( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});

Source: https://api.jquery.com/event.stopimmediatepropagation/

Upvotes: 1

Lex Podgorny
Lex Podgorny

Reputation: 2930

Disabling all events on the page is very easy. Hard part is to restore them when needed.

document.body.innerHTML = document.body.innerHTML;

This will effectively remove all events bound to DOM nodes by replacing the DOM with it's "virgin" copy.

Most of the time user won't even notice the redraw.

Upvotes: 5

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53538

You can't "disable" all of them without also intercepting the actual event binding, so you'd have to end up with something like this:

(function(prototypes) {
  prototypes.forEach(function(prototype) {
    var eventTracker = {};

    var oldAEL = prototype.addEventListener;
    prototype.addEventListener = function(a,b,c) {
      if (!eventTracker[a]) { eventTracker[a] = true; }
      return oldAEL.call(this, a, function(evt) {
        console.log(a, eventTracker[a]);
        if(eventTracker[a] === true) {
          b(evt);
        }
      },c);
    };

    prototype.toggleEvent = function(name, state) { 
        eventTracker[name] = state;
    }; 
  });   
}([Document.prototype, HTMLElement.prototype, ...]));

example: http://jsfiddle.net/BYSdP/1/

the button gets three click listeners, but if the second button is clicked, the event regulator for "click" is set to false, so none of the events will actually trigger the originally supplied code. Note that this also makes debugging a LOT harder, because you're wrapping handlers in anonymous functions.

Upvotes: 3

Related Questions