jQuery TouchSwipe插件不适用于链接?
我正在使用jQuery TouchSwipe插件。 它在div上工作得很好,但它在链接上根本不起作用。
我想要它,所以如果你点击或点击链接,你会得到默认的链接行为。 但是,如果你刷卡我想要javascript滑动,就像元素是一个div一样。
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
多么棒的问题。 为了解决这个问题,我进入了源代码。 您应该知道默认情况下禁用锚点滑动。
version:1.5.0 – 添加了excludedElements,一个jquery选择器,指定不触发滑动的子元素。 默认情况下,这是一个删除所有表单,输入选择,按钮和锚元素 ( 源 )的选择。
默认值:
excludedElements:"label, button, input, select, textarea, a, .noSwipe"
只需传入excludedElements
选项sans the anchor标签,即可在链接上进行滑动操作:
$("a").swipe({ // Generic swipe handler for all directions swipe: function(event, direction) { $(this).text("You swiped " + direction); }, excludedElements: "label, button, input, select, textarea, .noSwipe" });
这个难题还有一个关键。 您不能在内部设置threshold: 0
,以禁用所有点击/点击事件。 将threshold
设置为高于0的任何threshold
,或完全省略。 如果你使它达到threshold: 1
,它将只允许鼠标点击,否则将解释滑动。
我希望这就是你要找的东西。
演示1 – 手指/鼠标向上检测到滑动
$(function() { // Enable swiping... $(".test").swipe({ // Generic swipe handler for all directions swipe: function(event, direction) { $(this).text("You swiped " + direction); }, excludedElements: "label, button, input, select, textarea, .noSwipe", threshold:1 }); // Stackoverflow disables snippets opening links, so this captures clicks for a demo $(".test").on("click", function(e){ alert($(this)[0].nodeName + " was clicked"); }); });
.test {font-size: 48px;}
Please swipe me
Please swipe me
这不是最佳选择,但您可以使用任何具有类似于链接样式的元素,并像这样处理方向参数。
$("#swipable").swipe( { swipe:function(event, direction, distance, duration, fingerCount, fingerData) { if (direction == null) { location.href = 'somewhere.html' } else { // Do something else... } }, threshold:0 });
这是一个工作示例https://jsfiddle.net/q3gnt8s5/8/
PS。 哈哈注意到这篇文章有多久了,希望它能用到某种方式,哈哈