将 onclick 事件侦听器添加到并发事件

Question

我想创建一个简单的弹出例程，使用 overlay class 使背景变暗，并使用 popup class 显示弹出窗口。我将此功能设为切换功能。这里的技巧是我想将此功能附加到 overlay div 以便如果用户单击黑暗变暗的背景，它将自动关闭弹出窗口（等于取消对话框）。

function popup (popupclass = ".popup", overlayclass = ".overlay") {
    if (!$(overlayclass).is(':visible')) {
        $(overlayclass).fadeTo('slow', 0.7);
        $(popupclass).fadeTo('slow', 0.7);
        $(popupclass).center();
        $(overlayclass).click(popup(popupclass, overlayclass));
    }
    else {
        $(overlayclass).fadeOut('slow');
        $(popupclass).fadeOut('slow');
    }
}

但是第一次调用这个函数时，背景变暗，弹窗出现，但马上又淡出。怎么了？

Answer 1

在这种情况下

$(overlayclass).click(popup(popupclass, overlayclass));

当功能参数作为点击事件的参数传递时，它会立即执行并调用

所以这样调用函数

$(overlayclass).click( function() { 
 popup(popupclass, overlayclass) 
});

将 onclick 事件侦听器添加到并发事件

Adding onclick event listener to a concurrent event

jquery

popup

onclick

jquery-events