Javascript JQuery-从元素中删除所有事件侦听器
我正在使用此处找到的插件()实现滑动功能,以更改网站中的页面,以便与移动设备一起使用。我在这个问题的底部还包括了插件代码 滑动功能本身很好,但由于我使用AJAX加载页面,每次加载新页面时都会添加新的事件处理程序,因此事件处理程序之间存在冲突 我最初确实认为问题是因为我在android上测试,插件没有完全测试,但iOS设备的问题也是一样的 我尝试过使用stopImmediatePropagation(),但这意味着只使用第一个处理程序,而不是最后一个,这意味着重复加载同一个页面,而不是下一个页面。我也尝试过使用off()和unbind(),但它们不会删除处理程序 由于处理程序是使用插件中的addEventListener添加的,因此我假设删除它们的唯一方法是使用removeEventListener。然而,我在引用函数名时遇到了麻烦,因为它们是在插件中创建的。如果我可以引用函数名,那么我认为我可以删除侦听器,然后在加载页面时添加新的侦听器。如果由于任何原因无法执行此操作,是否有方法删除附加到除off()或unbind()之外的元素的所有侦听器 非常感谢。:) touchwipe插件的代码:Javascript JQuery-从元素中删除所有事件侦听器,javascript,jquery,Javascript,Jquery,我正在使用此处找到的插件()实现滑动功能,以更改网站中的页面,以便与移动设备一起使用。我在这个问题的底部还包括了插件代码 滑动功能本身很好,但由于我使用AJAX加载页面,每次加载新页面时都会添加新的事件处理程序,因此事件处理程序之间存在冲突 我最初确实认为问题是因为我在android上测试,插件没有完全测试,但iOS设备的问题也是一样的 我尝试过使用stopImmediatePropagation(),但这意味着只使用第一个处理程序,而不是最后一个,这意味着重复加载同一个页面,而不是下一个页面。
/**
* jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
* Common usage: wipe images (left and right to show the previous or next image)
*
* @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
* @version 1.1.1 (9th December 2010) - fix bug (older IE's had problems)
* @version 1.1 (1st September 2010) - support wipe up and wipe down
* @version 1.0 (15th July 2010)
*/
(function($) {
$.fn.touchwipe = function(settings) {
var config = {
min_move_x: 20,
min_move_y: 20,
wipeLeft: function() { },
wipeRight: function() { },
wipeUp: function() { },
wipeDown: function() { },
preventDefaultEvents: true
};
if (settings) $.extend(config, settings);
this.each(function() {
var startX;
var startY;
var isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
}
function onTouchMove(e) {
if(config.preventDefaultEvents) {
e.preventDefault();
}
if(isMoving) {
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
var dx = startX - x;
var dy = startY - y;
if(Math.abs(dx) >= config.min_move_x) {
cancelTouch();
if(dx > 0) {
config.wipeLeft();
}
else {
config.wipeRight();
}
}
else if(Math.abs(dy) >= config.min_move_y) {
cancelTouch();
if(dy > 0) {
config.wipeDown();
}
else {
config.wipeUp();
}
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
return this;
};
})(jQuery);
检查此代码:
var test = $( "<div></div>" ); // example element
test . click ( function () {} );
test . mouseover ( function () {} );
$.each ( $._data ( test [ 0 ], "events" ), function ( name ) // first argument of function: "$._data ()" is: "Element" - not jQuery object
{
//console . log ( name ); // output: "click" and "mouseover
test . off ( name ); // function off() removes an event handler
} );
// alert ( typeof $._data ( test [ 0 ], "events" ) ); // return "undefined" - no events
var test=$(“”);//示例元素
测试。单击(函数(){});
测试。mouseover(函数(){});
$.each($.\u data(test[0],“events”)、函数(name)//函数的第一个参数:“$.\u data()”是:“Element”-而不是jQuery对象
{
//console.log(name);//输出:“单击”和“鼠标悬停”
test.off(name);//函数off()删除事件处理程序
} );
//警报(类型为$。_数据(测试[0],“事件”);//返回“未定义”-无事件
更多信息:.
Working fiddle:.您试图删除哪些事件侦听器?是onTouchMove、onTouchStart还是插件附加的所有事件侦听器?如果是这种情况,您可能希望在对象中添加一个布尔变量,指示是否(hasAlreadyAttached)不再附加侦听器,但这会改变插件代码。我实际上已经解决了这个问题,将对刷卡代码的调用移动到另一个位置,这样它只会被调用一次。不过,感谢您的帮助。:)