从结构对话框覆盖中删除 Click 处理程序答案

【问题标题】：Remove Click handler from fabric dialog overlay从结构对话框覆盖中删除 Click 处理程序
【发布时间】：2017-10-14 03:13:46
【问题描述】：

我正在使用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 上的处理程序

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

解决方案 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 上的点击事件处理程序？

【问题讨论】：

标签： javascript office-ui-fabric office-fabric

【解决方案1】：

根据用例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】：

我没有成功点击removeEventHandler，但我使用了cloneNode，这样对话框就不会在点击覆盖时关闭。

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

【讨论】：