Question

我正在使用JQuery on方法将事件处理程序附加到窗口对象：

$(window).on('resize', function(e){
     /** my functional code goes here **/
     e.stopPropagation();
});

这是多次调用事件处理程序：原因是因为事件处理程序位于JQuery插件的初始化部分，所以当有人像这样调用插件构造函数时：

$('selector').myPlugin({settings_1});
$('selector').myPlugin({settings_2});
$('selector').myPlugin({settings_3});

事件处理程序连接3次。

我正在寻找一种方法来识别和淘汰3个事件处理程序中的一个（使用off方法），以便在调整大小时，只会触发其中一个。

如何识别事件处理程序并删除我想要的事件？！

感谢。

Answer 1

试试这个：

function myHandler(e){
     /** my functional code goes here **/
     e.stopPropagation();
}

$(window).on('resize', function (e){
    $(window).off('resize', myHandler);
    $(window).on('resize', myHandler);
});

Answer 2

如果您的事件处理程序仅使用jquery附加（不使用普通的javascript），请阅读this question的答案以检查DOM元素是否已有事件处理程序，在您的情况下，避免重复它。

Answer 3

您可以使用{key, callback}的数组。像这样：

window.resizeCallbacks = [];

function addResizeCallback(key, callback) {
    window.resizeCallbacks.push({
        key: key,
        callback: callback
    });
}

function removeResizeCallback(key) {
    var index = -1;
    for (var i = 0; i < window.resizeCallbacks.length; i++) {
        if (window.resizeCallbacks[i].key === key) {
            index = i;
        }
    }
    if (index >= 0) {
        window.resizeCallbacks.splice(index, 1);
    }
}


$(function() {
    $(window).resize(function() {
        for (var i = 0; i < window.resizeCallbacks.length; i++) {
            window.resizeCallbacks[i].callback();
        }
    });
});

使用JQuery on和off方法附加和删除选定的事件处理程序

3 个答案: