Question

注意：我知道有关如何删除特定事件监听器的几个问题，但我的用例是特定的。

我想从'window'元素中删除特定的事件监听器。

类似的东西： -

window.addEventListener（“message”，receiveMessage，false）;

window.removeAllEventListener（ “消息”）;

以下是自定义drupal插件： -

CKEDITOR.plugins.add( 'aemassetpicker', {
// Register the icons. They must match command names.
icons: 'aemassetpicker',

// The plugin initialization logic goes inside this method.
init: function( editor ) {

    CKEDITOR.scriptLoader.load( 'https://code.jquery.com/jquery-1.11.1.min.js');

    var assetPickerURL = "https://localhost/aem/assetpicker";

    var style = "popup";

    var popup;

    function _popup(url) {
        popup = window.open(url, "dam", "left=25%,top=25%,height=800,width=1600,status=yes,toolbar=no,menubar=no,location=yes");
        //popup = window.open(url, "dam");
        //console.log("popup");
        //console.log(popup);
    }

    // Define the editor command that inserts a dailog.
    editor.addCommand( 'insertAEMAssets', {
        exec: function( editor ) {

            var img_asset;
            var title_asset;
            var url_asset;
            var type_asset;
            var size_asset;

            //$(window).off('message').on('message', receiveMessage);
            window.addEventListener("message", receiveMessage, false);

            var url = assetPickerURL;

            _popup(url);

            function receiveMessage (event) {
                // Don’t accept messages from other sources!
                if (assetPickerURL.indexOf(event.origin) != 0) {
                    return;
                }

                var fromDam = JSON.parse(event.data);

                console.log("fromDam");
                console.log(fromDam);

                if (fromDam.config) {
                    var configFromDam = fromDam.config;

                    if (configFromDam.action === 'close' || configFromDam.action === 'done') {
                        if (popup) {
                            popup.close();
                        }
                    }
                }

                if (fromDam.data) {
                    var dam_detail = fromDam.data;

                    for (var i in dam_detail) {
                        img_asset = dam_detail[i].img;
                        title_asset = dam_detail[i].title;
                        url_asset = dam_detail[i].url;
                        type_asset = dam_detail[i].type;
                        size_asset = dam_detail[i].size;
                        //console.log(img_asset);
                        //console.log(title_asset);
                        //console.log(url_asset);
                        //console.log(type_asset);
                        //console.log(size_asset);
                        editor.insertHtml( '<img src="' + url_asset + '/_jcr_content/renditions/cq5dam.thumbnail.319.319.png" alt="' + title_asset + '"></img>' );
                    }
                }

                window.removeEventListener("message", receiveMessage, false);
            }
        }
    });

    // Create the toolbar button that executes the above command.
    editor.ui.addButton( 'AEMAssetPicker', {
        label: 'Insert AEM Assets',
        command: 'insertAEMAssets',
        toolbar: 'basicstyles,0',
        allowedContent: true
    });

}
});

我尝试过： -

将回调receiveMessage移到顶部，但需要在其中调用editor.insertHtml。
如果我使用window.addEventListener（“message”，receiveMessage，false）;在函数外部它不起作用，因为函数地址每次都会改变。
window.removeEventListener（“message”，receiveMessage，false）; 在window.addEventListener之前（“message”，receiveMessage，false）;但同样没有具有相同地址的回调函数，因此仍会创建另一个事件监听器。

有什么想法吗？

Answer 1

如果您无法访问addEventListener使用的原始函数，则无法使用DOM API将其删除。您需要该函数引用来调用removeEventListener。

因此，如果你想这样做，你需要存储你在某处添加的receiveMessage函数，然后在删除它时使用它。例如，在插件中声明一个变量：

var lastReceiveMessage = null;

然后：

if (lastReceiveMessage) {
    window.removeEventListener("message", lastReceiveMessage, false);
}
lastReceiveMessage = receiveMessage;
window.addEventListener("message", receiveMessage, false);

以及之后当你删除它时因为你得到了你想要的信息：

window.removeEventListener("message", receiveMessage, false);
if (lastReceiveMessage == receiveMessage) {
    lastReceiveMessage = null;
}

如何使用本机javascript从窗口中删除特定的事件侦听器

1 个答案: