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

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。

附言目前无法以编程方式更新插件的选项。

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。

像魅力一样工作:-) 享受