Hassan Abbas Hassan Abbas - 5 months ago 22
Javascript Question

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 class is added. The function recordData registers the event. I need to remove all the click events on 'g' elements after one iteration so it does not register twice if any g element is repeated in another iteration. How can i remove all the event listeners on 'g' element specially the one i added in through recordData.



<g id="4119-virtuality" angle="3.7699111843077517" class="bubble" transform="translate(102.63251712643411,493.138632973281)" style="pointer-events: auto; fill: black; font-weight: bold;">
<circle r="52.21875" style="opacity:0"></circle>
<rect rx="5" ry="5" style="fill: rgb(170, 170, 170);" x="-52.21875" y="-45" width="104.4375" height="90"></rect>
<text text-anchor="middle" style="font-size:20" alignment-baseline="middle">
<tspan x="0" y="0">virt</tspan>
</text>
</g>







function recordData(){
var element = document.getElementsByClassName("bubble");
for(var i = 0; i < element.length; i++){
element[i].addEventListener("click", 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);
}
}, false);
}
}




Answer

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);
  }


}