How To Remove All The Click Handlers In Javascript

I have d3 elements in my html page consisting of 'g' elements which contain the class bubble and their structure looks like this. When i do a click, the event registers and a click

Solution 1:

Remove it before adding:

 var recordData = function() {
 var element = document.getElementsByClassName("bubble");
  for (var i = 0; i < element.length; i++) {
    element[i].removeEventListener("click", event);
    element[i].addEventListener("click", event);
  }
}

var event = function() {

  var id = this.attributes.id.value;
  var index = findWithAttr(local_data, "keywordId", id);

  if (this.attributes.class.value.split(" ").indexOf("clicked") == -1) {
    console.log("Clicked");
    local_data[index].sub_rel = true; // Update the sub relevance to the original array
    // Store the clicked elements temporarily
    clicked_elements.push({
      id: id,
      keyword: local_data[index].keyword,
      obj_rel: local_data[index].obj_rel,
      sub_rel: local_data[index].sub_rel
    })
    var bubs = svg.selectAll(".contextbubble,.bubble");
    var b = bubs[0].filter(function(d) {
      return d.id === id
    });
    d3.select(b[0]).style("font-weight", "bold");
    d3.select(b[0]).classed("clicked", true);

  } else if (this.attributes.class.value.split(" ").indexOf("clicked") > -1) {
    console.log("Unclicked");
    local_data[index].sub_rel = false;
    var indx = findWithAttr(clicked_elements, "id", id);
    clicked_elements.splice(indx, 1);


    var bubs = svg.selectAll(".contextbubble,.bubble");
    var b = bubs[0].filter(function(d) {
      return d.id === id
    });
    d3.select(b[0]).style("font-weight", "normal");
    d3.select(b[0]).classed("clicked", false);
  }


}

Solution 2:

You can use DOM removeEventListener (opposite to addEventListener).

Example:

var element = document.getElementById("myDIV")
  , onClick = function() { /**/ };

element.addEventListener("click", onClick); // to bind handler
element.removeEventListener("click", onClick); // to unbind handler

Remember to save a reference to the handler function you binded with addEventListener, to remove it.

If you use jQuery, Zepto.js you can instead use $(element).on("click", myFunction) and $(element).off("click", myFunction) to unbind.

Solution 3:

You would use off() to remove an event like so:

This will remove all click events bound to this element.

$("#test").off("click").click(function() { //you code });

Look this : stackoverflow