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 here。

Answer 1

<强> TL; DR

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

<强>解释

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

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

文档（带点击处理程序）
- div（带点击处理程序）
  - div（使用点击处理程序）

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

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

jQuery全屏幕背景在菜单上移动

1 个答案: