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 (with click handler)

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

为了停止这个冒泡，JavaScript(不是jQuery)给了我们一个stopPropagation方法的事件对象。调用此函数将告诉浏览器取消气泡处理。