hammer.js和preventDefault()；

Question

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

代码片段；

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();
    }
}

Answer 1

考虑到锤子2.0+ event.gesture不再是事件，而是一个简单的对象。

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();
});

​

Answer 2

我想你也可以试试event.stopPropagation()和event.gesture.stopPropagation()。但哈默似乎给出了这种方法:对于类似的情况，event.gesture.stopDetect()。

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