滑动事件取消文本选择答案

【问题标题】：swipe event cancels text selection滑动事件取消文本选择
【发布时间】：2017-07-10 02:43:03
【问题描述】：

JQM 1.4.5

我遇到了由 JQuery Mobile 实现的“滑动”事件。作为一般规则，只听一个事件不应该改变用户体验。根据这条规则，JQM 和 Chrome 中似乎存在错误。

在 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 个字符。

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

【问题讨论】：

如果您激活 DevTools (F12)，问题就会消失。铬 59.0.3071.115
@omar 不适合我它不
登录github.com/jquery/jquery-mobile/issues/8582

标签： google-chrome jquery-mobile

【解决方案1】：

在您的滑动处理程序中，停止事件传播。这将使滑动事件成为事件堆栈的结尾。没有这个，滑动调用，然后触发其他事件。

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

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

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

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

【讨论】：

是的，我正在使用 chrome（虽然目前不在移动设备上）。我在jsfiddle.net/cudwLd4w/3 更新了小提琴
你的小提琴在chrome Version 59.0.3071.115windows上对我来说仍然存在问题。行为零变化。
有趣。 Version 59.0.3071.115 (Official Build) (64-bit) 此处 (macOS)。不过，我确实在你的小提琴上遇到过这个问题。
只是出于兴趣，如果您将“stopPropagation”注释掉，您是否还会遇到问题？

【解决方案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

【讨论】：