Question

JQM 1.4.5

我在使用＆＃34;轻扫＆＃34;时遇到问题。由JQuery Mobile实现的事件。作为一般规则，只是听一个事件不应该改变用户体验。通过这个规则，JQM＆amp;中似乎存在一个错误。铬。

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

<input type="email" value="drag-select@this-text.com" />

<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()会做类似的事情。如名称所示，它将阻止默认行为。因此，如果在文档上向左滑动就像＆＃34; back＆＃34;默认情况下按钮（它在我的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

滑动事件取消文字选择

2 个答案: