Удалить обработчик кликов из наложения диалогового окна ткани

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

Я перепробовал много решений, некоторые из которых все еще не могут удалить обработчики из оверлея:

Решение 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>