javascript - 从单独的文件调用事件监听器

Question

我添加了两个点击事件监听器:

• $(openGalleryDiv).click() 将显示带有幻灯片动画的 overflow:hidden div
• $(closeGalleryDiv).click() 将隐藏 (overflow:auto) 打开的 div

现在的问题是，如果我将事件监听器直接设置到 index.php 页面中，一切正常，但如果我将它们设置到 main.js 中的函数中> 在 index.php 中调用函数 openCloseGallery.desktopEvents() 的文件(如下所示)，尽管没有单击任何 div，但在加载页面时都会触发这两个事件。

有人可以解释一下为什么吗？

index.php

$(document).ready(function() {
    openCloseGallery.desktopEvents();
});

main.js

var openCloseGallery = function () {
    function openCloseAnimation(action) {
        if (action) {               // 1 -> OPEN
            $(galleryDiv).parent().addClass('animate-open-gallery');
            $(superWrapperDiv).addClass('animate-close-superwrapper');
            $('body').css('overflow', 'hidden');
        } else {                    // 0 -> CLOSE
            $(galleryDiv).parent().removeClass('animate-open-gallery').addClass('animate-close-gallery');
            $(superWrapperDiv).removeClass('animate-close-superwrapper').addClass('animate-open-superwrapper');
            $('body').css('overflow', 'auto');
        }
    }

    var desktopEvents = function () {
        $(openGalleryDiv).click(openCloseAnimation(true));
        $(closeGalleryDiv).click(openCloseAnimation(false));
    });
});

Answer 1

您正在事件监听器中调用该函数。尝试一下

    var desktopEvents = function () {
        $(openGalleryDiv).click(function(){ openCloseAnimation(true) });
        $(closeGalleryDiv).click(function(){ openCloseAnimation(false) });
    });

在您当前的代码中，它传递函数的返回值openCloseAnimation(true/false)，而不是返回函数本身。