我需要检测并对左/右滑动做出反应,但是想要让用户能够滚动相同的元素,所以只要他左右移动他的手指,最大上/下移动对于X像素,它不应该滚动,但是当它超过X时,它应该滚动。
所以我做的是:
var startX, startY, $this = $(this);
function touchmove(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
var deltaX = touches[0].pageX - startX;
var deltaY = touches[0].pageY - startY;
if (Math.abs(deltaY) > 50) {
$this.html('X: ' + deltaX + '<br> Y: ' + deltaY + '<br>TRUE');
$this.unbind('touchmove', touchmove);
return true;
} else {
$this.html('X: ' + deltaX + '<br> Y: ' + deltaY);
event.preventDefault();
}
}
}
function touchstart(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
startX = touches[0].pageX;
startY = touches[0].pageY;
$this.bind('touchmove', touchmove);
}
//event.preventDefault();
}
但我没有恢复滚动“if”情况的能力......
感谢您的任何提示。
答案 0 :(得分:45)
我写了自己的触摸处理程序events.maybe这可以帮助你
它检查:
快速点击:'fc'
向左滑动:'swl'
向右滑动:'swr'
向上滑动:'swu'
向下滑动:'swd'
每次检查都会初始化它的对应事件。但是你可以滚动并做任何你正常做的事情。你刚刚有一些新事件。
你需要swl swr,我建议使用fc(fastclick)进行点击事件......它比普通点击快得多。
window.onload = function() {
(function(d) {
var
ce = function(e, n) {
var a = document.createEvent("CustomEvent");
a.initCustomEvent(n, true, true, e.target);
e.target.dispatchEvent(a);
a = null;
return false
},
nm = true,
sp = {
x: 0,
y: 0
},
ep = {
x: 0,
y: 0
},
touch = {
touchstart: function(e) {
sp = {
x: e.touches[0].pageX,
y: e.touches[0].pageY
}
},
touchmove: function(e) {
nm = false;
ep = {
x: e.touches[0].pageX,
y: e.touches[0].pageY
}
},
touchend: function(e) {
if (nm) {
ce(e, 'fc')
} else {
var x = ep.x - sp.x,
xr = Math.abs(x),
y = ep.y - sp.y,
yr = Math.abs(y);
if (Math.max(xr, yr) > 20) {
ce(e, (xr > yr ? (x < 0 ? 'swl' : 'swr') : (y < 0 ? 'swu' : 'swd')))
}
};
nm = true
},
touchcancel: function(e) {
nm = false
}
};
for (var a in touch) {
d.addEventListener(a, touch[a], false);
}
})(document);
//EXAMPLE OF USE
var h = function(e) {
console.log(e.type, e)
};
document.body.addEventListener('fc', h, false); // 0-50ms vs 500ms with normal click
document.body.addEventListener('swl', h, false);
document.body.addEventListener('swr', h, false);
document.body.addEventListener('swu', h, false);
document.body.addEventListener('swd', h, false);
}
在这种情况下,h是我处理每种类型事件的处理程序,我将处理程序添加到正文中。
我理解你的问题,你只需要写
YOURELEMENT.addEventListener('swr',YOURSWIPERIGHTFUNCTION,false);
YOURELEMENT.addEventListener('swl',YOURSWIPELEFTFUNCTION,false);
处理多个元素和相同的函数......只需添加一个处理程序。
所以,如果你有
<ul id="ul"><li>1</li><li>2</li><li>3</li></ul>
你这样做:
var deleteli=function(e){
var li=e.target;
console.log('deleting '+li.textContent);
}
document.getElementById('ul').addEventListener('swl',deleteli,false);
对于fc&amp;同样如此SWR
ios中有一个错误:不要使用alert()..它会执行2次。
答案 1 :(得分:6)
接受的答案中有一个“错误”。如果您不在Android上使用Chrome,而是在浏览器中使用Chrome或使用“webview”(例如,对于html5-hybrid-app),则不会检测到滑动。
我发现由于正常的滚动行为,事件不会触发。所以添加“e.preventDefault();”在touchmove中可以修复它或者Eric Fuller在接受的答案中修复它。
这是一个很好的剪辑,但在移动WebApp或网站中,这可能导致糟糕的滚动卡顿,因为触摸事件是一直观察到的。
所以我决定建立新的东西。它不像拥有新的事件监听器那样舒服,但它足够舒适以满足我的需求和它的性能。
function detectswipe(el,func) {
swipe_det = new Object();
swipe_det.sX = 0;
swipe_det.sY = 0;
swipe_det.eX = 0;
swipe_det.eY = 0;
var min_x = 20; //min x swipe for horizontal swipe
var max_x = 40; //max x difference for vertical swipe
var min_y = 40; //min y swipe for vertical swipe
var max_y = 50; //max y difference for horizontal swipe
var direc = "";
ele = document.getElementById(el);
ele.addEventListener('touchstart',function(e){
var t = e.touches[0];
swipe_det.sX = t.screenX;
swipe_det.sY = t.screenY;
},false);
ele.addEventListener('touchmove',function(e){
e.preventDefault();
var t = e.touches[0];
swipe_det.eX = t.screenX;
swipe_det.eY = t.screenY;
},false);
ele.addEventListener('touchend',function(e){
//horizontal detection
if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y)))) {
if(swipe_det.eX > swipe_det.sX) direc = "r";
else direc = "l";
}
//vertical detection
if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x)))) {
if(swipe_det.eY > swipe_det.sY) direc = "d";
else direc = "u";
}
if (direc != "") {
if(typeof func == 'function') func(el,direc);
}
direc = "";
},false);
}
myfunction(el,d) {
alert("you swiped on element with id '"+el+"' to "+d+" direction");
}
要使用该功能,请使用
detectswipe('an_element_id',myfunction);
detectswipe('an_other_element_id',my_other_function);
如果检测到滑动,则使用参数element-id和“l,r,u,d”(左,右,上,下)调用函数“myfunction”。
答案 2 :(得分:3)
所有这些代码都需要改进(就像您在触摸操作中可以找到的大多数代码一样)。
在玩触摸事件时,请注意用户多个手指,触摸有标识符,touches
列表代表所有当前触摸表面,甚至接触未移动。
所以这个过程相对简单:
ontouchstart:获取第一次更改的触摸(不是event.originalEvent.touches
属性,而是event.originalEvent.changedTouches
属性。使用event.originalEvent.changedTouches[0].identifier
注册其标识符并触摸属性以查找(pageX
/ pageY
或clientX
/ clientY
,它们与{{1}相结合非常有用}方法);
ontouchmove:确保当前触摸位于带有DOMElement.getBoundingClientRect()
的changedTouches列表中。如果它什么也没有返回,那意味着用户已经移动了另一个触摸(而不是您正在寻找的那个)。还要注册触摸属性以查找并执行任何操作。
ontouchend:再次,您必须确保当前触摸位于changedTouches列表中。使用触摸属性完成工作,最后丢弃当前的触摸标识符。
如果你想做得更强,可以考虑多次接触(不仅仅是一次)来观察。
有关TouchEvent,TouchList和Touch的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events
答案 3 :(得分:1)
受@cocco的启发,我创建了一个更好的(非最小化)版本:
(function(d) {
// based on original source: https://stackoverflow.com/a/17567696/334451
var newEvent = function(e, name) {
// This style is already deprecated but very well supported in real world: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent
// in future we want to use CustomEvent function: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
var a = document.createEvent("CustomEvent");
a.initCustomEvent(name, true, true, e.target);
e.target.dispatchEvent(a);
a = null;
return false
};
var debug = false; // emit info to JS console for all touch events?
var active = false; // flag to tell if touchend should complete the gesture
var min_gesture_length = 20; // minimum gesture length in pixels
var tolerance = 0.3; // value 0 means pixel perfect movement up or down/left or right is required, 0.5 or more means any diagonal will do, values between can be tweaked
var sp = { x: 0, y: 0, px: 0, py: 0 }; // start point
var ep = { x: 0, y: 0, px: 0, py: 0 }; // end point
var touch = {
touchstart: function(e) {
active = true;
t = e.touches[0];
sp = { x: t.screenX, y: t.screenY, px: t.pageX, py: t.pageY };
ep = sp; // make sure we have a sensible end poin in case next event is touchend
debug && console.log("start", sp);
},
touchmove: function(e) {
if (e.touches.length > 1) {
active = false;
debug && console.log("aborting gesture because multiple touches detected");
return;
}
t = e.touches[0];
ep = { x: t.screenX, y: t.screenY, px: t.pageX, py: t.pageY };
debug && console.log("move", ep, sp);
},
touchend: function(e) {
if (!active)
return;
debug && console.log("end", ep, sp);
var dx = Math.abs(ep.x - sp.x);
var dy = Math.abs(ep.y - sp.y);
if (Math.max(dx, dy) < min_gesture_length) {
debug && console.log("ignoring short gesture");
return; // too short gesture, ignore
}
if (dy > dx && dx/dy < tolerance && Math.abs(sp.py - ep.py) > min_gesture_length) { // up or down, ignore if page scrolled with touch
newEvent(e, (ep.y - sp.y < 0 ? 'gesture-up' : 'gesture-down'));
//e.cancelable && e.preventDefault();
}
else if (dx > dy && dy/dx < tolerance && Math.abs(sp.px - ep.px) > min_gesture_length) { // left or right, ignore if page scrolled with touch
newEvent(e, (ep.x - sp.x < 0 ? 'gesture-left' : 'gesture-right'));
//e.cancelable && e.preventDefault();
}
else {
debug && console.log("ignoring diagonal gesture or scrolled content");
}
active = false;
},
touchcancel: function(e) {
debug && console.log("cancelling gesture");
active = false;
}
};
for (var a in touch) {
d.addEventListener(a, touch[a], false);
// TODO: MSIE touch support: https://github.com/CamHenlin/TouchPolyfill
}
})(window.document);
与@cocco原始版本相比的重要更改:
event.touches[0].screenX/screenY
作为主要信息来源。 pageX/pageY
属性不能正确表示屏幕上的触摸动作,因为如果某些页面随着触摸而滚动,则也会影响pageX/pageY
的值。pageX/pageY
中的手势,则在触发手势之前忽略手势)将来需要做的事情:
CustomEvent()
function interface代替createEvent()
方法。pageX/pageY
和screenX/screenY
分别配置最小手势长度?用法如下:
document.body.addEventListener('gesture-right', function (e) { ... });
或jquery样式
$("article").on("gesture-down", function (e) { ... });
答案 4 :(得分:0)
触摸时左右检测仍在移动。
这是通过保存最后一个位置并使用超时来擦除touchmove停止后的最后一个位置来完成的。
var currentX;
var lastX = 0;
var lastT;
$(document).bind('touchmove', function(e) {
// If still moving clear last setTimeout
clearTimeout(lastT);
currentX = e.originalEvent.touches[0].clientX;
// After stoping or first moving
if(lastX == 0) {
lastX = currentX;
}
if(currentX < lastX) {
// Left
} else if(currentX > lastX){
// Right
}
// Save last position
lastX = currentX;
// Check if moving is done
lastT = setTimeout(function() {
lastX = 0;
}, 100);
});