When the user clicks on an element, I need to prevent the default action and perform an additional action. So far I have:

document.body.onclick = function (e) {
    e.preventDefault();
    e.stopPropagation();
}

The problem is that after I perform the above action, I need to remove the preventDefault() and stopPropagation() because none of the links (a href) are being triggered after this. How do I undo this after performing it? Please note that it is a pure JavaScript code and I'm not using any library like jQuery. So I can't use .bind() and .unbind(). Any idea on this would be greatly appreciated.

When the user clicks on an element, I need to prevent the default action and perform an additional action. So far I have:

document.body.onclick = function (e) {
    e.preventDefault();
    e.stopPropagation();
}

The problem is that after I perform the above action, I need to remove the preventDefault() and stopPropagation() because none of the links (a href) are being triggered after this. How do I undo this after performing it? Please note that it is a pure JavaScript code and I'm not using any library like jQuery. So I can't use .bind() and .unbind(). Any idea on this would be greatly appreciated.

• javascript

5 Answers 5

You can replicate the behavior of bind and unbind using addEventListener and removeEventListener

function stopIt(e) {
  e.preventDefault();
  e.stopPropagation();
}

document.body.addEventListener("click", stopIt);

// then later

document.body.removeEventListener("click", stopIt);

Note: IE <= 8 doesn't support addEventListener and removeEventListener, so you'll need to use attachEvent as mentioned here - https://developer.mozilla/en-US/docs/Web/API/EventTarget.addEventListener#Compatibility

Don't bind the event to the body, bind the event to the element you need to prevent:

document.getElementById('theTarget').onclick = function(e) {
    // ...
}

If I understand your requirement correctly, I'm afraid you cannot undo the e.preventDefault(); . But by default, the handler function will be executed before performing the default action. So in your case, you just don't need the e.preventDefault(); at all. And remember to attach the event listeners only to <a> tags

var aTags = document.getElementsByTagName("a");

for (var i=0;i<aTags.length;i++){
    aTags[i].onclick = function (e) {
       // just perform your action here, don't need e.preventDefault();
    }
}

Here is the working solution for breaking or rollback the stopImmediatePropagation():

Do unbind

$("#mydiv").unbind();

I solved a similar challenge by using setTimeOut.

I have a collapsable filter panel which, when collapsing/expanding has some transition running for 700ms. Before the transition is finished, another click done before 700ms elapsed caused some wrong layout issues.

I declare a global variable "disabledCollapse" in a default state "false" which allows the code to run once. The variable bees "true" for 701ms and that disables the click function for that period until the transition is over.

let disabledCollapse = false

$('#collapse-filter-button').on("click", function(e) {

   if (disabledCollapse) {
      e.preventDefault()
      e.stopPropagation()
      return
   }

   disabledCollapse = true
   setTimeout(function() {
      disabledCollapse = false
   }, 701)

   // my other code

})