[英]Remove event listener in JavaScript
我向元素添加一个事件监听器:
/* sitepoint.com/javascript-this-event-handlers */
function AttachEvent(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
}else{
element.attachEvent("on"+type, handler);
}
}
window.addEventListener("load", function() {
var els = getElementsByClassName('name', 'img');
var elsnum = els.length;
if(elsnum) //found
{
var i = 0;
for(i=0; i < elsnum; i++)
{
var the_els = els[i];
AttachEvent(the_els, "click", myfunction);
}
}
}, false);
稍后在myfunction
,我想再次删除处理程序,以防止重复点击:
function myfunction(e) {
e = e || window.event;
var target = e.target || e.srcElement;
//more code
//...
//remove click handler
target.removeEventListener('click', e, false);
//more code
//...
}
但是,事件侦听器未被删除。 当我单击其中一个元素时, myfunction
的代码将再次执行。 如何删除事件侦听器以防止再次单击单击的元素?
PS:我不使用jQuery。
我相信你几乎就在那里,但你必须将监听 removeEventListener
传递给removeEventListener
,而不是事件本身。 所以尝试:
target.removeEventListener('click', myFunction, false);
使用element.removeEventListener(type, listener, useCapture)
请记住在同一个元素上使用它,并为它提供与添加时完全相同的参数。
编写此代码的一种很好的方法是创建一个函数,将侦听器详细信息存储在变量中,模仿setTimeout()
工作方式,并将其添加到元素原型中。 这是一个示例函数。
HTMLElement.prototype.eventListener=
function(type, func, capture){
if(typeof arguments[0]=="object"&&(!arguments[0].nodeType)){
return this.removeEventListener.apply(this,arguments[0]);
}
this.addEventListener(type, func, capture);
return arguments;
}
这将为已经可以接受事件列表器的所有HTML节点添加一个方法,并允许您执行此操作。
var a=element.eventListener('click', myFunction, false); //to add
element.eventListener(a); //to remove
http://www.quirksmode.org/js/events_advanced.html
要删除事件处理程序,请使用removeEventListener()
方法。
另请参阅http://help.dottoro.com/ljahxbsx.php
object.removeEventListener (eventName, listener, useCapture);
listener
- 必填。 引用要删除的事件处理函数。 您需要传递要删除的侦听器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.