锤子.js 和 preventDefault();答案

【问题标题】：hammer.js and preventDefault();锤子.js 和 preventDefault();
【发布时间】：2013-08-14 06:53:53
【问题描述】：

js 也支持触摸手势。我正在努力防止默认操作。当我设置event.preventDefault 或event.gesture.preventDefault() 甚至在锤子上应用参数{prevent_defaults: true } 时，它只会触发锚点上的默认操作。我该如何防止这种情况和/或我做错了什么？！

代码sn-p;

function initializeNavigation() {
    $("nav").hammer({prevent_defaults: true }).on("tap", "a", function(event) {
        event.preventDefault();
        event.gesture.preventDefault();
        var target = $(this.hash);
        scrollToTarget(target, 1200);
        // if there is an open detailItem then close it.
        if (detailItemOpen) {
            $("div." + detailItemOpen).slideUp();
        }
    })

    if (Modernizr.mq('only screen and (max-width: 767px)'))  {
        initializeMobileMenuAndSetButton();
    }
}

【问题讨论】：

虽然不是完全重复，但这个答案可能会有所帮助：stackoverflow.com/questions/10714868/…
我没有得到你的答案，因为它也发生在 Firefox 中。它与 Hammer.js 和事件有关。当我只使用点击事件时，一切都可以在带有鼠标的设备上正常运行。
没错，在这里进行了长时间的讨论。它是关于 stopPropagation()，但也适用于 preventDefault()：github.com/EightMedia/hammer.js/issues/237
啊哈好吧。我读了题目。因此，点击与点击事件不同。这就是为什么仍然触发默认行为，单击锚点。我可以使用选择的解决方案。我绑定了第二个 on-method .on("click", funtion(event) { event.preventDefault()}
您最后的评论应该是接受的答案 myradon ;)

标签： javascript jquery events hammer.js

【解决方案1】：

考虑到 Hammer 2.0+ event.gesture 不再是 Event，而是一个简单的 Object。

event.gesture.srcEvent 不是 stopPropagation 的正确事件，因此它不起作用。

如果您正在使用tap 事件，并且想要防止点击/点击文档，您可以执行类似的操作。我们需要创建一个全局点击处理程序来替换原来的方法stopPropagation 和preventDefault

function createHandler(event) {
  return {
    isHandled: false,
    _shouldStopPropagation: false,
    _shoulePreventDefault: false,
    stopPropagation: event.stopPropagation.bind(event),
    preventDefault: event.preventDefault.bind(event),
  }
}


function handleEvent(handler, node) {
  let clickHandler; 


  if (!handler.isHandled) {
    handler.isHandled = true;
    document.addEventListener('click', clickHandler = (event)=> {
      if (handler._shouldStopPropagation) {
        handler.stopPropagation();
        event.stopPropagation();
      }
      
      if (handler._shoulePreventDefault) {
        handler.preventDefault();
        event.preventDefault();
      }
      document.removeEventListener('click', clickHandler, true);
    }, true);
  }
}


// Create a global tap Event so we can replace the original functions
document.addEventListener('tap', (event)=> {
  let handler = createHandler(event);

  event.stopPropagation = function() {
    handler._shouldStopPropagation = true;
    handleEvent(handler);
  };
  event.preventDefault  = function() {
    handler._shoulePreventDefault = true;
    handleEvent(handler);
  }
}, true);

// Now we can use it.
document.addEventListener('tap', (event)=> {
  /* If you want to prevent Default */
  event.preventDefault();

  /* If you want to stop propagation */
  event.stopPropagation();

  /* If you want to do both */
  event.preventDefault();
  event.stopPropagation();
});

【讨论】：

我可能/应该添加侦听器并停止传播的所有可能事件是什么？ “tap” 甚至似乎都不是文档可以监听的实际事件......

【解决方案2】：

我想你也可以试试event.stopPropagation() 和event.gesture.stopPropagation()。但似乎 Hammer 提供了该方法：event.gesture.stopDetect() 用于类似情况。

来源：https://github.com/hammerjs/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults

【讨论】：

它很旧，但认为 stopPropagation 没有解决任何问题。单击和点击事件应该冒泡到处理程序绑定到的同一个 DOM 元素。如果你使用 stoppropagation，它不会在 DOM 中进一步冒泡。