元素上的jQuery touchSwipe事件阻止滚动 [英] jQuery touchSwipe event on element prevents scroll
问题描述
我有一些垂直排列的div元素列表.使用 jQuery TouchSwipe插件添加了滑动事件来捕捉左右滑动.想法是通过像这样向左或向右滑动来从列表中删除元素:
最后我得到了这样的东西:
$(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>
问题
在移动chrome浏览器上效果很好，但无法在本机android浏览器上向上/向下滚动.
我知道此swipeStatus可以同时捕获左/右方向和上/下方向，但是不知道如何防止这种情况-我只需要右滑动事件即可.
有什么想法吗? 预先感谢.
更新
我不能使用jQuery移动框架，因为它与我必须使用的其他脚本冲突. 也许会有另一种方法可以解决?
这不能回答您所提出的问题的实际问题，但可以替代触摸塞.您仍然可以在同一应用程序或网站中将它们用于其他用途.
巧合的是，前几天我正在看这个(jquery-mobile-swipe-list) https://jsfiddle.net/4gk27ru1/
代码
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);
因为像素的移动是正号或负号，以防止使用if语句时元素从任一侧移动.可以使用if/else if
Example
如果触摸到加号像素，则将元素从左向右(---->)移动.从右到左(<-----)的相反方向小于1个像素，即(x < 1)
if (x > 1) {
slide(x);
}
https://jsfiddle.net/v5Ldovmj/
演示2 滑动至删除
https://jsfiddle.net/afkdtjh9/
添加
// 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);
您可以使用 jquery动画或类似 velocity js 的插件来控制元素移动的速度，因此使用css变换本身时感觉更顺畅 >
I have some list of div elements ordered vertically. Using jQuery TouchSwipe plugin added swipe event to catch left-right swipe. Idea was to remove element from list by swiping it left or right side like this:
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.
I understand that this swipeStatus catch both left/right and up/dmown directions, but don't know how to prevent is from it - I need only right swipe event.
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?
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.html and this demo http://jsbin.com/luzunu/1/edit?html,css,js,output which uses some Math to detect horizontal touch.
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.
Demo drag/swipe to reveal behind. i put in a delay of 5 seconds for the touch events to start.
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 if statement. Other conditions can be applied using 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)
if (x > 1) {
slide(x);
}
https://jsfiddle.net/v5Ldovmj/
Demo 2 Slide to Delete
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 animate or a pluging like velocity js to control the speed of the elements moving so its smoother as using css transform by itself feels very fast
这篇关于元素上的jQuery touchSwipe事件阻止滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
