【问题标题】:How do I remove an event listener? [duplicate]如何删除事件侦听器? [复制]
【发布时间】:2012-09-10 04:47:12
【问题描述】:

可能重复:
JavaScript: remove event listener

单击“开始”按钮后,我试图从导航中删除一些事件侦听器。我似乎没有什么可以开火的。

这是我用来做的代码:

var startButton = document.getElementById('startButton');

startButton.addEventListener('click', function() {
    hrNav.removeEventListener('mousedown', highlight, false);
    alert('Did it remove the listener?');
}, false); 

我试图删除的事件监听器是:

if(hrNav.addEventListener){  
    hrNav.addEventListener('mousedown', highlight, false);  
    return true;  
} else {  
    hrNav.attachEvent('on'+'click', highlight);  
    return true;  
}

所有这些都封装在一个 jQuery document.ready 函数中。

【问题讨论】:

  • 是什么让你觉得removeEventListener没有删除事件监听器?
  • 任何元素下是否有开始按钮?
  • @David 我认为问题在于startButton 的事件监听器没有触发。
  • 如果你使用的是 jQuery 的 document.ready 函数,那你为什么不使用 jQuery 的事件呢?

标签: javascript jquery javascript-events


【解决方案1】:

既然你说你正在使用 jQuery。试试这样的:http://jsfiddle.net/MmFb2/4/

JS

$(function(){
    var startButton = $('#startButton');
    var hrNav = $('#hrNav');

    startButton.bind('click', function() {
        hrNav.unbind('click');
    }); 

    var toggle = false; 
    hrNav.bind('click', function(){
        var ele = $(this); 
        if(toggle){
            ele.css('background-color', '');
        }else{            
            ele.css('background-color', 'yellow');
        }
        toggle = !toggle;
    });
}); 

HTML

<input id="startButton" type="button" value='click to disable' />
<div id="hrNav">Click me to highlight</div>​

【讨论】:

  • “解除绑定”和移除我之前设置的事件监听器一样吗?
  • 是的,它是 jQuery 对该动作的抽象。不必考虑特定浏览器的所有特性。 jQuery 创建了一个单一的入口点来抽象出所有这些差异,使开发人员可以专注于手头的任务,而不是如何在 IE6-10、Firefox、Chrome、Opera、Safari 等中完成它。这不仅适用于事件绑定/解除绑定,还可以使用 DOM 操作和 DOM 元素检索。在我看来,非常值得您投资。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-09-04
  • 2018-01-25
  • 2010-10-10
  • 2022-08-03
  • 1970-01-01
  • 2011-03-07
相关资源
最近更新 更多