1

我正在使用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吗？

4

2 回答 2

1

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

var _dialogOverlay = uidialog._overlay.overlayElement.cloneNode();
document.body.appendChild(_dialogOverlay);
uidialog._overlay.overlayElement.style.display = 'none';
于 2017-05-18T04:25:31.103 回答
0

取决于用例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>
于 2019-04-03T08:59:25.800 回答