I am implementing swipe functionality to change pages in a website for use with mobile devices using the plugin found here ( http://www.netcu.de/jquery-touchwipe-iphone-ipad-library ). I have also included the plugin code at the bottom of this question.
The swipe functionality itself is fine, but due to the fact that I am loading pages using AJAX, new event handlers are being added every time a new page is loaded, and so the event handlers are conflicting.
I did initially think that the problem was because I am testing on android and the plugin is not fully tested, but the problem is the same for iOS devices as well.
I have tried using stopImmediatePropagation(), but that means that only the first handler is used, not the last, meaning that the same page is loaded repeatedly instead of the next one. I have also tried using off() and unbind(), but these do not remove the handlers.
Seeing as the handlers are added using addEventListener in the plugin, I assume that the only way to remove them is to use removeEventListener. However, I am having trouble referring to the names of the functions as they have been created in a plugin. If I can refer to the function names then I think that I can remove the listeners and then add the new one when the page is loaded. If this isn't possible for any reason, is there a way of removing all listeners attached to an element other than off() or unbind()?
Many thanks in advance. :)
Code for the touchwipe plugin:
/**
* 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);
Check this code:
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
More on: jQuery function off .
Working fiddle: JSFiddle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.