javascript 元素上的 jQuery touchSwipe 事件可防止滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29966181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery touchSwipe event on element prevents scroll
提问by zur4ik
I have some list of divelements ordered vertically. Using jQuery TouchSwipe pluginadded swipe event to catch left-right swipe. Idea was to remove element from list by swiping it left or right side like this:
我有一些div垂直排序的元素列表。使用jQuery TouchSwipe 插件添加了滑动事件来捕捉左右滑动。想法是通过向左或向右滑动来从列表中删除元素，如下所示：
Finally I got something like this:
最后我得到了这样的东西：
$(function() {
$('.swElement').swipe({
swipeStatus: function(event, phase, direction, distance, duration, fingerCount) {
console.log(distance);
if (phase == "move") {
if (direction == "right") {
$(this).css({
'right' : (distance*-1)+'px'
});
}
} else if (phase == "cancel") {
$(this).css({
'right' : 0
});
} else if (phase == "end") {
$(this).animate({
'right' : '-100%'
}, 200, function() {
$(this).remove();
});
} else {
//?????
}
},
threshold: 150,
maxTimeThreshold: 5000,
fingers: 'all'
});
});.swElement {
display: block;
width: 100%;
height: 50px;
border: 1px solid black;
box-sizing: border-box;
padding: 0 10px;
line-height: 50px;
cursor: pointer;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/2130702/cdn/jquery.touchSwipe.min.js"></script>
<h2>Swipe right to remove element</h2>
<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>
<div class="swElement">Element</div>Problem
问题
It's working great on mobile chrome browser, but prevents up/down scroll on native android browser.
它在移动 chrome 浏览器上运行良好，但会阻止在原生 android 浏览器上向上/向下滚动。
I understand that this swipeStatuscatch both left/right and up/dmown directions, but don't know how to prevent is from it - I need only right swipe event.
我知道这swipeStatus会同时捕获向左/向右和向上/向下的方向，但不知道如何防止它 - 我只需要向右滑动事件。
Any ideas? Thanks in advance.
有任何想法吗？提前致谢。
Update
更新
I can't use jQuery mobile framework, because it conflict's with other scripts which I have to use. Maybe there will be another way to figure out?
我不能使用 jQuery 移动框架，因为它与我必须使用的其他脚本冲突。也许会有另一种方法来弄清楚？
回答by Tasos
This is not answering the actual problem for your question, but is an alternative to touch plugging(s). You can still use them for other things in the same app or website.
这不是回答您问题的实际问题，而是触摸插头的替代方法。您仍然可以将它们用于同一应用程序或网站中的其他内容。
Coincidence the other day i was having a look at this (jquery-mobile-swipe-list) https://github.com/ksloan/jquery-mobile-swipe-list/blob/master/index.htmland this demo http://jsbin.com/luzunu/1/edit?html,css,js,outputwhich uses some Math to detect horizontal touch.
巧合的是前几天我正在看这个（jquery-mobile-swipe-list）https://github.com/ksloan/jquery-mobile-swipe-list/blob/master/index.html和这个演示http： //jsbin.com/luzunu/1/edit?html,css,js,output使用一些数学来检测水平触摸。
I Created two demos. One that reveals whats behind the elements like the picture in your question and another to drag/swipe to delete like in the code you have.
我创建了两个演示。一个显示元素背后的内容，例如您问题中的图片，另一个可以像您拥有的代码一样拖动/滑动删除。
Any problems with elements flickering using -webkit-transform: translateZ(0); transform: translateZ(0);fixes the flickers.
使用元素闪烁的任何问题都会-webkit-transform: translateZ(0); transform: translateZ(0);修复闪烁。
Demodrag/swipe to reveal behind. i put in a delay of 5 seconds for the touch events to start.
演示拖动/滑动以显示背后。我延迟了 5 秒让触摸事件开始。
https://jsfiddle.net/4gk27ru1/
https://jsfiddle.net/4gk27ru1/
Code
代码
var startPos;
var handlingTouch = false;
var itemis;
setTimeout(function() {
document.addEventListener('touchstart', function(e) {
// Is this the first finger going down?
if (e.touches.length == e.changedTouches.length) {
startPos = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
};
}
});
document.addEventListener('touchmove', function(e) {
// If this is the first movement event in a sequence:
if (startPos) {
// Is the axis of movement horizontal?
if (Math.abs(e.changedTouches[0].clientX - startPos.x) > Math.abs(e.changedTouches[0].clientY - startPos.y)) {
handlingTouch = true;
e.preventDefault();
onSwipeStart(e);
}
startPos = undefined;
} else if (handlingTouch) {
e.preventDefault();
onSwipeMove(e);
}
});
document.addEventListener('touchend', function(e) {
if (handlingTouch && e.touches.length == 0) {
e.preventDefault();
onSwipeEnd(e);
handlingTouch = false;
}
});
function slide(x) {
// slide the element
$(itemis).css({transform: "translatex("+x+"px)"})
}
var swipeOrigin, x, itempos;
function onSwipeStart(e) {
// find what element is been touched. In your case it may be closest("swElement") but you need to test
itemis = $(e.target).closest("li").find(".move")
swipeOrigin = e.touches[0].clientX;
}
function onSwipeMove(e) {
x = e.touches[0].clientX - swipeOrigin;
slide(x);
}
function onSwipeEnd(e) {
//On Touch End if x (distance traveled to the right) is greater than +35 pixels then slide element +100 pixels.
if (x > 35) {
slide(100);
}
else {
slide(0);
}
}
}, 5000);
Because the movement of pixels are either in plus or minus to prevent the movement of the elements from either side its easy when using an ifstatement. Other conditions can be applied using if/else if
因为像素的移动是加号或减号，以防止元素从任一侧移动，所以在使用if语句时很容易。其他条件可以使用if/else if
Example
move the element from left to right (---->) if plus pixels touched. The Opposite way right to left (<-----) is less than 1 pixel i.e (x < 1)
如果触摸加像素，则从左到右移动元素 (---->)。相反的方式从右到左 (<-----) 小于 1 像素即(x < 1)
if (x > 1) {
slide(x);
}
https://jsfiddle.net/v5Ldovmj/
https://jsfiddle.net/v5Ldovmj/
Demo 2Slide to Delete
演示 2滑动删除
https://jsfiddle.net/afkdtjh9/
https://jsfiddle.net/afkdtjh9/
Additions
添加
// detect window width to fly out the items from whatever the devices window width is.
var itemwidth = $(window).width();
// slide item to windows width wait half a second, slide it up and remove from the DOM
slide(itemwidth);
setTimeout(function() {
$(itemis).slideUp("fast").remove()
}, 500);
You can use jquery animateor a pluging like velocity jsto control the speed of the elements moving so its smoother as using css transform by itself feels very fast
您可以使用jquery animate或类似速度 js的插件 来控制元素移动的速度，因此它更平滑，因为使用 css 变换本身感觉非常快
回答by Sourabh
Its simpler than all the answers above. Just add this parameter and you'll be good to go :
它比上面的所有答案都简单。只需添加此参数，您就可以开始了：
allowPageScroll:"vertical"
回答by Serhio g. Lazin
if (direction == "left"){
return false;
}
Prevents any events when swiping to the left
向左滑动时阻止任何事件
