如何阻止Hammer.js的swiperight事件在Owl Carousel滑动时触发？

我懂你的问题——滑动Owl Carousel轮播时，绑定在body上的swiperight事件也被触发，导致左侧菜单意外弹出，而且直接用Hammer.off()没效果对吧？这是因为你的事件绑定在body上，轮播的滑动事件会冒泡到body层级，所以直接解绑轮播元素的事件根本起不到作用。下面给你几个实用的解决方案：

方法1：在swiperight回调里判断触发源 #

最简单的思路就是：在触发swiperight事件时，先检查滑动的目标元素是不是轮播容器的一部分，如果是，就跳过菜单打开的逻辑。

代码示例：

var hammertime = new Hammer(document.body);
hammertime.on('swiperight', function(ev) {
    // 获取轮播容器元素
    const carousel = document.getElementById('events');
    // 检查当前滑动的元素是否属于轮播容器
    if (carousel.contains(ev.target)) {
        return; // 直接返回，不执行菜单逻辑
    }
    // 这里写你的左侧菜单呼出代码
});

这个方法的核心是利用Element.contains()判断目标元素是否是轮播容器的后代，只要是在轮播区域内的滑动，就不会触发菜单。

方法2：给轮播元素绑定事件阻止冒泡 #

给轮播容器单独绑定一个swiperight事件，在回调里阻止事件向上冒泡到body，这样body上的swiperight事件就接收不到这个滑动信号了。

代码示例：

// 初始化body的Hammer事件
var hammertime = new Hammer(document.body);
hammertime.on('swiperight', function(ev) {
    // 你的左侧菜单呼出代码
});

// 给轮播容器添加Hammer事件，阻止冒泡
const carousel = document.getElementById('events');
const carouselHammer = new Hammer(carousel);
carouselHammer.on('swiperight', function(ev) {
    ev.stopPropagation(); // 阻止事件冒泡到body
    // 注意：如果不想影响轮播本身的滑动，不要加ev.preventDefault()
});

stopPropagation()会切断事件的冒泡路径，让body层级的swiperight事件完全感知不到轮播区域的滑动，同时不会影响轮播自身的功能。

方法3：结合Owl Carousel的回调动态控制事件 #

Owl Carousel自带拖动开始和结束的回调，我们可以在用户开始拖动轮播时暂时解绑body的swiperight事件，拖动结束后再重新绑定。

代码示例：

// 把菜单逻辑抽成独立函数，方便绑定和解绑
function openLeftMenu(ev) {
    // 你的左侧菜单呼出代码
}

var hammertime = new Hammer(document.body);
// 初始绑定事件
hammertime.on('swiperight', openLeftMenu);

// 初始化Owl Carousel时添加拖动回调
$('#events').owlCarousel({
    // 你的轮播配置项，比如：
    items: 1,
    loop: true,
    nav: false,
    // 拖动开始时解绑事件
    onDragStart: function() {
        hammertime.off('swiperight', openLeftMenu);
    },
    // 拖动结束时重新绑定事件
    onDragEnd: function() {
        hammertime.on('swiperight', openLeftMenu);
    }
});

这种方法相当于在用户操作轮播的时间段内，临时禁用body的swiperight事件，操作结束后恢复，逻辑也很清晰。

内容的提问来源于stack exchange，提问作者Jean R.