如何删除javascript中的所有点击处理程序答案

【问题标题】：How to Remove all the click handlers in javascript如何删除javascript中的所有点击处理程序
【发布时间】：2016-06-11 08:34:58
【问题描述】：

我的 html 页面中有 d3 元素，由包含类气泡的“g”元素组成，它们的结构如下所示。当我单击时，事件注册并添加了单击类。函数 recordData 注册事件。我需要在一次迭代后删除“g”元素上的所有点击事件，这样如果任何 g 元素在另一次迭代中重复，它就不会注册两次。如何删除“g”元素上的所有事件侦听器，特别是我通过 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);
  }
}

【问题讨论】：

标签： javascript jquery html d3.js click

【解决方案1】：

在添加之前删除它：

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


}

【讨论】：

谢谢。效果很好。

【解决方案2】：

您可以使用 DOM removeEventListener（与 addEventListener 相对）。

例子：

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

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

请记住保存对您与 addEventListener 绑定的处理函数的引用，以将其删除。

如果你使用jQuery、Zepto.js，你可以使用$(element).on("click", myFunction)和$(element).off("click", myFunction)来解绑。

【讨论】：

【解决方案3】：

您可以使用off() 来删除这样的事件：

这将删除绑定到该元素的所有点击事件。

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

看这个：stackoverflow

【讨论】：