CODEWITHSUNDEEP
javascripthtml
prime
prime

Reputation: 15564

Remove specific set of event listeners from an HTML element using JavaScript

I want to remove only the mouseup event listners from a selected HTML element.

I used the below code but it will remove all listners.

var old_element = divs[d];
                var new_element = old_element.cloneNode(true);
                old_element.parentNode.replaceChild(new_element, old_element);

this is how i attach event listners.

var divs = document.getElementsByTagName('body');// to enhance the preformance
for(var d in divs) { 
        try{             
            if (divs[d].addEventListener) {
                 divs[d].addEventListener('mouseup',callHighlight);
            } else {
                divs[d].attachEvent('mouseup', callHighlight);
            } 
        }catch(err){
            //alert(err.message);
        }
}

Upvotes: 1

Views: 241

Answers (3)

Jay Harris
Jay Harris

Reputation: 4271

By default all event listeners are null, so simply just reset it. Problem is that all your mouseup events are registered to the body, so therefore you won't be able to drop the event without first stopping the event from bubbling to the body. You can solve that problem with, stopPropagation()

 old_element.onmouseup = function (e) {
   // event won't go up to the body tag
   e.stopPropagation();
   return null;
 };

or 

 function kill (e) {
  e.stopPropagation(); 
  return null; 
 }

 old_element.onmouseup = kill;
 second_element.onmouseup = kill;

JSFIDDLE

Upvotes: 0

RobG
RobG

Reputation: 147343

When cloning an element, listeners added using addEventListener or by direct property assignment (element.onclick = fn;) are removed, but in–line listeners and those added using IE's attachEvent are not.

In your scenario where listeners are added by reference and also possibly using attachEvent, you are best to remove them using removeEventListener and detachEvent. So you might like to create add and remove functions like:

function addEvent(element, event, fn) {
  if (element.addEventListener) {
    element.addEventListener(event, fn, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, fn);
  }
}

function removeEvent(element, event, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(event, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + event, fn);
  }
}

Note that there are some significant differences between addEventListener and attachEvent, the most important are that in the latter, this is not set to the element whose handler is calling the function and a reference to the event isn't passed as the first argument to the listener. So the listener function ends up looking like:

function foo(evt) {
  evt = evt || window.event;
  var target = evt.target || evt.srcElement;
  ...
}

There are ways around this, but they introduce more issues. Keep it simple if you can.

Upvotes: 1

PSL
PSL

Reputation: 123739

You should use removeEventListener instead of replacechild which will obviously remove all events.

 old_element.removeEventListener('mouseup', handler);

Upvotes: 1

Related Questions