如何删除javascript中的所有点击处理程序 [英] How to Remove all the click handlers in javascript

问题描述

我在我的HTML页面中有d3元素，包含'g'元素，其中包含类气泡，它们的结构看起来像这样。当我做点击时，事件寄存器和点击类被添加。函数recordData注册事件。我需要在一次迭代后删除'g'元素上的所有点击事件，所以如果在另一次迭代中重复任何g元素，它不会注册两次。如何删除'g'元素上的所有事件监听器，特别是通过recordData添加的事件监听器。

  < g id =4119-virtualityangle =3.7699111843077517class =bubbletransform =translate（102.63251712643411,493.138632973281）style =pointer-events：auto; fill：black; font-weight：bold; > < circle r =52.21875style =opacity：0>< / circle> < rect rx =5ry =5style =fill：rgb（170，170，170）; x = -  52.21875y = -  45width =104.4375height =90>< / rect> < text text-anchor =middlestyle =font-size：20alignment-baseline =middle> < tspan x =0y =0> virt< / tspan> < / text>< / g>  

  function recordData（）{var element = document.getElementsByClassName（bubble）; for（var i = 0; i  

解决方案之前添加：

  var recordData = function（）{
 var element = document.getElementsByClassName（bubble） ; 
 for（var i = 0; 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; //更新与原始数组的子相关性
 //临时存储点击的元素
 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）; 
} 
 
 
} 
  

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

解决方案

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


}

这篇关于如何删除javascript中的所有点击处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！