jQuery 元素上的 touchSwipe 事件阻止滚动
jQuery touchSwipe event on element prevents scroll
我有一些垂直排列的 div
元素列表。使用 jQuery TouchSwipe plugin 添加了滑动事件来捕获左右滑动。想法是通过像这样向左或向右滑动来从列表中删除元素:
最后我得到了这样的东西:
$(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 浏览器上运行良好,但会阻止 up/down 在本机 android 浏览器上滚动。
我知道这个 swipeStatus
捕获了 left/right 和 up/dmown 方向,但不知道如何防止它 - 我只需要右滑动事件。
有什么想法吗?
提前致谢。
更新
我不能使用 jQuery 移动框架,因为它与我必须使用的其他脚本冲突。
也许会有另一种方法来弄清楚?
这并没有回答您问题的实际问题,而是一种触摸式堵塞的替代方法。您仍然可以将它们用于同一应用或网站中的其他用途。
巧合的是,前几天我正在看这个 (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,它使用一些数学来检测水平触摸。
我创建了两个演示。一个揭示了元素背后的内容,例如您问题中的图片,另一个 drag/swipe 像您拥有的代码一样删除。
使用 -webkit-transform: translateZ(0); transform: translateZ(0);
修复了元素闪烁的任何问题。
Demodrag/swipe后面揭晓。我为触摸事件开始延迟了 5 秒。
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 animate 或类似 velocity js 的插件来控制元素移动的速度,因此它更流畅,因为使用 css 变换本身感觉非常快
if (direction == "left"){
return false;
}
向左滑动时阻止任何事件
它比上面所有的答案都简单。只需添加此参数,您就可以开始了:
allowPageScroll:"vertical"
我有一些垂直排列的 div
元素列表。使用 jQuery TouchSwipe plugin 添加了滑动事件来捕获左右滑动。想法是通过像这样向左或向右滑动来从列表中删除元素:
最后我得到了这样的东西:
$(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 浏览器上运行良好,但会阻止 up/down 在本机 android 浏览器上滚动。
我知道这个 swipeStatus
捕获了 left/right 和 up/dmown 方向,但不知道如何防止它 - 我只需要右滑动事件。
有什么想法吗? 提前致谢。
更新
我不能使用 jQuery 移动框架,因为它与我必须使用的其他脚本冲突。 也许会有另一种方法来弄清楚?
这并没有回答您问题的实际问题,而是一种触摸式堵塞的替代方法。您仍然可以将它们用于同一应用或网站中的其他用途。
巧合的是,前几天我正在看这个 (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,它使用一些数学来检测水平触摸。
我创建了两个演示。一个揭示了元素背后的内容,例如您问题中的图片,另一个 drag/swipe 像您拥有的代码一样删除。
使用 -webkit-transform: translateZ(0); transform: translateZ(0);
修复了元素闪烁的任何问题。
Demodrag/swipe后面揭晓。我为触摸事件开始延迟了 5 秒。
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 animate 或类似 velocity js 的插件来控制元素移动的速度,因此它更流畅,因为使用 css 变换本身感觉非常快
if (direction == "left"){
return false;
}
向左滑动时阻止任何事件
它比上面所有的答案都简单。只需添加此参数,您就可以开始了:
allowPageScroll:"vertical"