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

时间:2016-02-01 23:26:51

标签: javascript hammer.js

我有一个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();
    }
  }
});

2 个答案:

答案 0 :(得分:6)

公认的解决方案对我没有用,所以我用Google搜索,这就是我找到的。

  

“我不能再选择我的文字了!”

     

Hammer正在设置一个属性来改善平移的用户体验   桌面。通常,桌面浏览器会选择文本   你拖过页面。用户选择的css属性禁用此功能。

     

如果您关心文本选择而不关心桌面   经验,您只需从默认值中删除此选项即可。使   确保在创建实例之前执行此操作。

delete Hammer.defaults.cssProps.userSelect;

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

答案 1 :(得分:3)

默认情况下,Hammer管理器处理触摸和鼠标输入。您可以通过设置inputClass选项指示它仅处理触摸输入:

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

这样它仍会检测到滑动手势,但只保留文本选择等鼠标操作。