多么美妙的问题啊。为了给你解决这个问题,我进入了源代码。你应该知道锚点滑动是disabled默认情况下。
版本:1.5.0 - 添加了 exceptedElements,这是一个 jquery 选择器,用于指定不触发滑动的子元素。默认情况下,这是一个删除所有表单、输入选择、按钮和锚元素 (source https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/blob/master/jquery.touchSwipe.js).
默认值:
excludedElements:"label, button, input, select, textarea, a, .noSwipe"
只需传入excludedElements
没有锚标记的选项可以在链接上进行滑动:
$("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: 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;}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script><a href="http://google.com" target="_blank" class="test">Please swipe me</a><br><br><div class="test">Please swipe me</div>
演示 2 - 在达到阈值后检测到滑动
此版本将在手指/鼠标扫过后检测滑动threshold
pixels before松开手指/鼠标。此方法的工作原理是检测滑动并设置一些data
在由第一个单击处理程序读取的链接中,然后该处理程序会阻止one点击事件传播。
The .on("click", function(event) {
handler 必须是 jQuery 事件链中的第一个处理程序,因此将所有这些代码放在页面顶部附近,最好就在 jQuery 加载位置的下方。
$(function() {
$(".test").swipe({
swipe: function(event, direction) {
$(this).text("You swiped " + direction);
},
swipeStatus: function(event, phase) {
var $this = $(this);
$this.data("stopclick", true); // Signal a temporarily click block
if(phase === $.fn.swipe.phases.PHASE_CANCEL) {
// Swipe was canceled, so unblock click handers
$this.data("stopclick", false);
}
},
excludedElements: "label, button, input, select, textarea, .noSwipe",
threshold:10,
triggerOnTouchEnd: false
})
.on("click", function(event) {
// Prevent click event propogation for one click
var $this = $(this);
if($this.data("stopclick") === true) {
event.stopImmediatePropagation();
event.preventDefault();
$this.data("stopclick", false); // Restore click propogation
}
});
// 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;}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script><a href="http://google.com" target="_blank" class="test">Please swipe me</a><br><br><div class="test">Please swipe me</div>