Question

我正在使用Office-Fabric-Ui及其对话框功能。

 var template = $("<div id='something'>This is modal dialog content</div>");
 var uidialog = new fabric["Dialog"](template[0]);

现在，uidialog有_overlay变量，点击此_overlay uidialog关闭，但我们不希望对话框在点击时关闭并尝试删除_overlay

上的处理程序

我尝试了很多解决方案，其中一些仍然无法从overlay元素中删除处理程序：

解决方案1 

fabric.Dialog.prototype.RemoveOverlayClick = function () {
    this._overlay.overlayElement.removeEventListener("click", this.close.bind(this));
    this._overlay.overlayElement.removeEventListener("click", this._overlay.hide.bind(this._overlay));
    this._overlay.overlayElement.removeEventListener("click", this.__proto__.close.bind(this.__proto__));
    this._overlay.overlayElement.removeEventListener("click", fabric.Dialog.prototype.close.bind(fabric.Dialog.prototype));
}
uidialog.RemoveOverlayClick();

解决方案2

uidialog._overlay.overlayElement.removeEventListener("click", uidialog.__proto__.close.bind(this.__proto__));
uidialog._overlay.overlayElement.removeEventListener("click", fabric.Dialog.prototype.close.bind(fabric.Dialog.prototype));

有人可以建议如何删除fabric.Overlay上的点击事件处理程序吗？

Answer 1

我在removeEventHandler点击时没有成功，但我使用了cloneNode，因此点击叠加后对话框不会关闭。

var _dialogOverlay = uidialog._overlay.overlayElement.cloneNode();
document.body.appendChild(_dialogOverlay);
uidialog._overlay.overlayElement.style.display = 'none';

Answer 2

取决于用例cloneNode可能不是最好的方法。问题是bind实际上返回一个新函数。删除事件处理程序的唯一方法是了解函数引用。

对于我们最近的项目，每当添加事件时，我们都会全局重写addEventListener函数（在文档顶部，或者至少在添加我们感兴趣的处理程序之前），我们为此保存了一个引用。

基本上，我们用两个新功能扩展了EventTarget对象并覆盖了其中一个。

        <script>
            (function () {
                "use strict";

                var f = EventTarget.prototype.addEventListener;

                EventTarget.prototype.addEventListener = function (type, fn, capture) {
                    this.f = f;
                    this._eventHandlers = this._eventHandlers || {};
                    this._eventHandlers[type] = this._eventHandlers[type] || [];
                    this._eventHandlers[type].push([fn, capture]);
                    this.f(type, fn, capture);
                }

                EventTarget.prototype.removeAllEventListeners = function (type) {
                    this._eventHandlers = this._eventHandlers || {};
                    if (type in this._eventHandlers) {
                        var eventHandlers = this._eventHandlers[type];
                        for (var i = eventHandlers.length; i--;) {
                            var handler = eventHandlers[i];
                            this.removeEventListener(type, handler[0], handler[1]);
                        }
                    }
                }

                EventTarget.prototype.getAllEventListeners = function (type) {
                    this._eventHandlers = this._eventHandlers || {};
                    this._eventHandlers[type] = this._eventHandlers[type] || [];
                    return this._eventHandlers[type];
                }

            })();
        </script>

从结构对话框覆盖

2 个答案: