添加addEventListener后似乎无法removeEventListener
问题描述:
我试图添加一个模糊事件到一些表单元素,它会为我运行一些代码。在最初的模糊之后,我试图从该元素中删除侦听器,以便它不会再次触发。添加addEventListener后似乎无法removeEventListener
onblur事件工作正常,但由于某种原因eventListener.remove似乎从未触发,所以模糊不会被删除。任何想法,我做错了什么?
基于lincolnk的意见更新,但仍然不是在IE工作:
(function() {
var els = [document.getElementsByTagName('input'),
document.getElementsByTagName('select')],
eventListener = {
add: function(el, ev, fn) {
if (window.addEventListener) { // Standard
el.addEventListener(ev, fn, false);
} else if (window.attachEvent) { // IE
var iefn = function() { fn.call(el) };
el.attachEvent('on' + ev, iefn)
} else { return false };
},
remove: function(el, ev, fn) {
if (window.removeEventListener) { // Standard
el.removeEventListener(ev, fn, false)
} else if (window.detachEvent) { // IE
var iefn = function() { fn.call(el) };
el.detachEvent('on' + ev, iefn)
} else { return false };
}
},
wtFormTracker = function() {
console.log(this.name);
eventListener.remove(this, 'blur', wtFormTracker);
};
for (var i = 0, j = els.length; i < j; i++) {
for (var y = 0, z = els[i].length; y < z; y++) {
eventListener.add(els[i][y], 'blur', wtFormTracker);
}
}
})();
UPDATE:在所有浏览器
(function() {
var els = [document.getElementsByTagName('input'),
document.getElementsByTagName('select')],
eventListener = {
add: function(el, ev, fn) {
if (window.addEventListener) { // Standard
el.addEventListener(ev, fn, false);
} else if (window.attachEvent) { // IE
el.attachEvent('on' + ev, fn)
} else { return false };
},
remove: function(el, ev, fn) {
if (window.removeEventListener) { // Standard
el.removeEventListener(ev, fn, false)
} else if (window.detachEvent) { // IE
el.detachEvent('on' + ev, fn)
} else { return false };
}
},
wtFormTracker = function(el) {
var target = el.target || el.srcElement;
console.log("'WT.ti','title-of-page','WT.ac', " + target.name);
eventListener.remove(target, 'blur', wtFormTracker);
};
for (var i = 0, j = els.length; i < j; i++) {
for (var y = 0, z = els[i].length; y < z; y++) {
eventListener.add(els[i][y], 'blur', wtFormTracker);
}
}
})();
答
你想删除test2
为blur
的处理程序,但你有没有在这个脚本中任何指定它。我也猜测使用this
在test1
指向window
这可能不是你想要的。
test1: function(e) {
console.log('add');
var target = e.target || e.srcElement;
eventListener.remove(target , 'blur', wtHelper.test1); // probably?
},
此外,如果你在IE中查看此,您正在创建attachEvent
一个全新的功能,然后再创建一个全新的功能detachEvent
,你就不会得到这样的任何地方。提供原始fn
参数到attachEvent/detachEvent
的方法没有任何问题,就像您为addEventListener
所做的一样。
答
您正在试图删除wtHelper.test2功能全面运作,这从未被定义为'模糊'事件的监听者。 你可能想要做这样的事情:
wtHelper = {
test1: function() {
console.log('add');
wtHelper.test2();
},
test2: function() {
console.log('remove');
eventListener.remove(this, 'blur', wtHelper.test1);
}
};
我发布了更新的代码...这是你指的IE? – CoryDorning 2010-10-20 02:42:20
@CoryDorning看起来不错。 – lincolnk 2010-10-20 05:14:06