锤击.JS桌面文本选择和滑动冲突

Hammer.JS desktop text selection and swipe conflict

本文关键字：冲突 选择 JS 桌面 文本 锤击      更新时间：2023-09-26

我有一个Hammer.js 2.06的工作实现，使用水平滑动在页面之间跳转。但是我发现桌面上存在冲突。当使用鼠标的用户选择文本片段时，该操作还会触发 Hammer 的滑动事件。

我想允许文本选择的默认浏览器行为，但也要使用 Hammer 的滑动手势。有没有办法让两者一起工作？或者我应该禁用鼠标手势支持，因为文本选择功能更重要，我将如何做到这一点？

delete Hammer.defaults.cssProps.userSelect // as suggested in tips 'n tricks
var myElement = document.getElementById("gestureCanvas"),
  nextp = document.getElementById("GotoNextPage"),
  prevp = document.getElementById("GotoPrevPage"),
  mc = new Hammer(myElement, {
    doubletap: false,
    pan: false,
    press: false,
    pinch: false,
    rotate: false,
    tap: false
  });
// gesture event listeners
mc.on("swipeleft swiperight", function(ev) {
  if (ev.type === "swipeleft") {
    if (Boolean(nextp.disabled) === false) {
      nextp.click();
    }
  } else if (ev.type === "swiperight") {
    if (Boolean(prevp.disabled) === false) {
      prevp.click();
    }
  }
});

接受的解决方案对我不起作用，所以我用谷歌搜索，这就是我发现的。

"我不能再选择我的文本了！"

锤子正在设置一个属性来改善平移的用户体验 桌面。通常，桌面浏览器会在以下情况下选择文本 在页面上拖动。用户选择 css 属性将禁用此功能。

如果您关心文本选择而不是桌面 经验，您可以简单地从默认值中删除此选项。做 请确保在创建实例之前执行此操作。

delete Hammer.defaults.cssProps.userSelect;

http://hammerjs.github.io/tips/

默认情况下，锤子管理器处理触摸和鼠标输入。您可以通过设置 inputClass 选项来指示它仅处理触摸输入：

mc = new Hammer(element, { inputClass: Hammer.TouchInput });

这样，它仍将检测滑动手势，但保留鼠标操作（如文本选择）。

相关文章：