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；博士

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

解释：

事件处理程序(无论是jQuery还是原始JavaScript)接受单个参数，即事件。这些事件对象中有各种有用的东西，但其中许多都因浏览器而异。幸运的是，stopPropagation是通用的。

对于您的用例，您可能遇到了堆栈冒泡事件的问题。说你有这样的东西：

• 文档(使用单击处理程序)
  • div (使用单击处理程序)
    • div (使用单击处理程序)

​

​

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

为了阻止这种冒泡，JavaScript (而不是jQuery)为该事件对象提供了一个stopPropagation方法。调用它将告诉浏览器取消气泡进程。