Question

我正在测试mmenu.js（http://mmenu.frebsite.nl）作为移动网站抽屉菜单的选项，它运行良好，但我遇到的一个问题是尝试更新选项值在之后创建了菜单。具体来说，我希望默认情况下将“dragOpen”选项设置为“true”，但是想要在具有水平滚动的元素上触发触摸事件时禁用它。

我有另一个插件处理幻灯片式元素的水平触摸滑动，所以我试图利用hammer.js，mmenu.js已经将其用于dragOpen事件，并将“dragOpen”更改为当触摸的目标是幻灯片容器时“false”：

$(function() {
    var navMenuLeft = $('nav#menu-left').mmenu({
        position: 'left',
        searchfield: true,
        dragOpen: true,
        threshold: 150
    });

    $('.swiper-container').hammer().on('touch', function(event){
        // this triggers properly, but I seem unable to access the options for
        // the mmenu object. If I log "navMenuLeft" it returns the #menu-left
        // element rather than the mmenu object, so "navMenuLeft.opts" is undefined
        console.log('touched swiper');
    });
});

我尝试将阈值增加到大于滑动幻灯片所需数量的数字，但幻灯片上的最小滑动仍然会触发dragOpen。我已经非常彻底地搜索了文档，感觉我只是错过了一些简单的东西。或者也许不是更改dragOpen选项，有一种方法可以设置要从拖动中排除的元素以打开菜单吗？

我认为dragOpen对用户体验并不重要，作为最后的手段将完全禁用它，但我希望找到一个解决方案，因为可能还有其他情况下以编程方式更新不同的选项也是必要的。

感谢您的帮助！

Answer 1

我认为最逻辑的方法是阻止拖拽事件冒泡DOM。例如，如果您有此标记：

<div id="page">
  <p>Some text</p>
  <div id="carousel"></div>
  <p>Some text</p>
</div>

尝试阻止事件冒出#carousel div：

$("#carousel").on( "drag", function( event ) {
    event.stopPropagation(); 
    event.gesture.stopPropagation();
});

这样，如果用户拖动#carousel div，则拖动事件不会冒泡到#page div。

P.S。此时无法以编程方式更新插件的选项。

Answer 2

有点晚了，但是如果有其他人正在寻找答案并像我一样偶然发现，

var options = {dragLockToAxis: true};
                var hammertime = new Hammer($("#Draging_element"), options);
                hammertime.on("dragleft dragright drag swipeleft swiperight touchstart",        function(ev) {
   ev.stopPropagation();
});

你正在看的主要部分是带有所有事件的hammertime.on（）。所有事件的原因是jquery.mmenu使用多个事件在功能上触发拖动，你需要在所有事件上调用stopPropagation。

像魅力一样:-) 享受

如何以编程方式更新jquery.mmenu.js选项？

2 个答案: