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.js 这里。

Answer 1

TL;DR

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

说明：

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

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

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

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

为了阻止这种冒泡，JavaScript（不是 jQuery）为我们提供了该事件对象的 stopPropagation 方法。调用此函数将告诉浏览器取消冒泡过程。