轻扫事件可取消文本选择

Question

JQM 1.4.5

我在使用JQuery Mobile实现的"滑动"事件时遇到问题。作为一般规则，仅收听事件不应改变用户体验。根据这个规则，JQM和Chrome中似乎有一个错误。

在 Firefox 和 IE 中，它按预期工作，但在 Chrome 中，当触发滑动事件时，鼠标拖动事件似乎被终止。

下面的例子，在这个jsfiddle中演示

<input type="email" value="[e-mail]" />
<script>
$(document).ready(function() {
$(document).on("swipe", function(evt) {
console.log("swiped " + new Date().getTime());
});
console.log("ready");
});
</script>

如果将鼠标拖到输入中的文本上以选择它，则只能选择 2-5 个字符。

任何人都可以建议解决方法吗？

Answer 1

在轻扫处理程序中，停止事件传播。 这将使轻扫事件成为事件堆栈的末尾。 如果没有这个，滑动呼叫，然后触发其他事件。

$(document).on("swipe", function(evt) {
console.log("swiped " + new Date().getTime());
evt.stopPropagation();
});

这样做，我能够突出显示文本的其余部分。

请注意，滑动事件仍会触发，但后续事件不会触发。 您可能只想在某些情况下取消。

还有evt.preventDefault()可以做类似的事情。 顾名思义，它将阻止任何默认行为。 因此，如果在文档上向左滑动默认情况下充当"后退"按钮(在我的 Android 上确实如此(，但您希望向左滑动不这样做，您可能也想preventDefault()。

Answer 2

框架正在根据自己的自定义scrollSupressionThreshold参数检查沿 x 轴的移动。此参数旨在检测和抑制默认的水平滚动(如果有的话(，从而允许触发自定义swipe、swipeleft或swiperight事件。

我在下面使用类似这样的东西来允许文本选择和滑动：

$(document)
.on('swiperight', function (e) {
var allowSelection = e.target.type == 'text' || e.target.type == 'textarea';
var swipeTransition = {transition: 'slide', reverse: true};
if(!allowSelection && !e.target.disabled) {
$.mobile.pageContainer.pagecontainer('change', '#pageId', swipeTransition);
}
}
})
.ready(function () {
$("input[type='text'], textarea")
.on('focus', function (e) {
$.event.special.swipe.scrollSupressionThreshold = Infinity;
})
.on('blur', function (e) {
$.event.special.swipe.scrollSupressionThreshold = 30;
});
});

如果只有垂直滚动条，则在 JQM 初始化时只能设置一次此参数。

类似的解决方案已发布在此处：https://stackoverflow.com/a/58491004/4845566