Remove Click handler from fabric dialog overlay

Question

I'm using Office-Fabric-Ui and its dialog functionality.

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

Now, uidialog has _overlay variable, on click of this _overlay the uidialog closes, but we don't want the dialog to close on click and trying to remove the handlers on _overlay

I have tried many solutions some of them are but still unable to remove the handlers from overlay element:

Solution 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();

Solution 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));

Can anybody suggest how to remove click event handlers on fabric.Overlay?

Answer 1

I was not successful in removeEventHandler for click, but I used cloneNode so that the Dialog will not close on click of overlay.

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

Answer 2

Depending on the use case cloneNode might not be the best way forward. The problem is that bind actually returns a new function. The only way to remove eventhandlers is to know the function reference.

For our recent project we overwrote the addEventListener function globally (in the top of the document, or at least before the handler we are interested in is added) evertime an event is added we save a reference for it.

Basically we extend the EventTarget object with two new functions and overwrite one.

        <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>