Today, when using jquery.fullpage.js, I found that the mobile debugging does not support sliding events, so I wrote a sliding event. As follows, when using this plug-in, I only need to bind a sliding event to the window, and I don't need to add a method. Since I used it for the first time, I haven't seen the specific information of his JS, but I just glanced at it, OK, see the specific content Code:
// Sliding event
/*
* el DOM Clicked elements
* fncontainer obj Event object collection
* offset Num Event triggered value
*/
function touchevent(el,fncontainer,offset){
var el = el?el:window;
var offset = offset?offset:50;
var startX,startY,
endX = 0,
endY = 0 ;
el.addEventListener('touchstart',function(e){
// console.log(e)
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
// console.log("startX->"+startX,"startY ->"+startY)
},false);
el.addEventListener('touchmove',function(e){
endX = e.touches[0].clientX;
endY = e.touches[0].clientY;
// console.log("endX ->"+endX,"endY ->"+endY)
},false);
el.addEventListener('touchend',function(e){
var lengthX = endX==0?0:Math.abs(startX-endX);
var lengthY = endY==0?0:Math.abs(startY-endY);
// console.log("lengthX"+lengthX,"lengthY"+lengthY)
if(lengthX>lengthY && lengthX>=offset){
fncontainer && (startX - endX) >0?(fncontainer.left?(fncontainer.left)():null):(fncontainer.right?(fncontainer.right)():null);
}else if(lengthY>lengthX && lengthY>=offset){
fncontainer && (startY - endY) >0 ?(fncontainer.up?(fncontainer.up)():null):(fncontainer.down?(fncontainer.down)():null);
}
},false);
}
var fncontainer = { //Define the corresponding event method
left:left,
right:right,
up:up,
down:down
}
touchevent(window,fncontainer);//If you do not need an event method, you can only pass in the element to add event listening
function left(){
alert('left')
}
function right(){
alert('right')
}
function up(){
alert('up')
}
function down(){
alert('down')
}