jQuery全屏背景在菜单上移动

Question

我目前正在构建一个全屏画廊 WP 主题，我注意到当您尝试选择图像以查看背景并使用鼠标上下滚动时，只要图像已经已选中，但我正在尝试创建一个无滚动区域（图像菜单），这样当您选择新图像以查看背景时，它不会跳来跳去。

这是我的global.js。我注意到如果我添加 return false; 它会停止滚动但我丢失了图像更改所以我将其删除。

 $(document).ready(function() {

    $(".dropgallery a, #fp_thumbtoggle").removeAttr("title");

    $('#fp_thumbtoggle, .dropgallery img').click(function() {
        $('#fp_thumbtoggle').toggleClass("active");

        if ($('#fp_thumbtoggle').hasClass('active')){
            $('#fp_thumbtoggle').animate({top:'65px'});
        }else{
            $('#fp_thumbtoggle').animate({top:'185px'});
        }
        $('.dropgallery').slideToggle('500');
        return false;
    });

 });

你可以找到我的gallery.jshere。

Answer 1

TL;DR

$('selector').click(function (e) {
    e.stopPropagation();
});

说明：

事件处理程序（无论是 jQuery 还是原始 JavaScript）采用单个参数，即一个事件。这些事件对象中包含各种使它们有用的漂亮东西，但其中许多因浏览器而异。幸运的是 stopPropagation 是通用的。

对于您的用例，您可能会遇到事件在堆栈中冒泡的问题。假设你有这样的东西：

• 文档（带有点击处理程序）
  • div（带有点击处理程序）
    • div（带有点击处理程序）

该事件将首先在底部 div 上触发，然后一旦执行完成，它就会冒泡。每个监听器都会收到通知，直到没有更多监听器为止。

为了阻止这种冒泡，JavaScript（不是 jQuery）在该事件对象上为我们提供了一个 stopPropagation 方法。调用它会告诉浏览器取消冒泡过程。