diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index ace778c3122..5ae09c7ad6f 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -9,6 +9,7 @@ import { MenuController } from './menu-controller';
import { MenuType } from './menu-types';
import { Platform } from '../../platform/platform';
import { GestureController } from '../../gestures/gesture-controller';
+import { UIEventManager } from '../../util/ui-event-manager';
/**
@@ -178,7 +179,7 @@ import { GestureController } from '../../gestures/gesture-controller';
selector: 'ion-menu',
template:
'
' +
- '',
+ '',
host: {
'role': 'navigation'
},
@@ -195,7 +196,7 @@ export class Menu {
private _isAnimating: boolean = false;
private _isPers: boolean = false;
private _init: boolean = false;
-
+ private _events: UIEventManager = new UIEventManager();
/**
* @private
@@ -207,11 +208,6 @@ export class Menu {
*/
@ViewChild(Backdrop) backdrop: Backdrop;
- /**
- * @private
- */
- onContentClick: EventListener;
-
/**
* @input {any} A reference to the content element the menu should use.
*/
@@ -349,15 +345,6 @@ export class Menu {
}
self._setListeners();
- // create a reusable click handler on this instance, but don't assign yet
- self.onContentClick = function(ev: UIEvent) {
- if (self._isEnabled) {
- ev.preventDefault();
- ev.stopPropagation();
- self.close();
- }
- };
-
self._cntEle.classList.add('menu-content');
self._cntEle.classList.add('menu-content-' + self.type);
@@ -368,11 +355,11 @@ export class Menu {
/**
* @private
*/
- bdClick(ev: Event) {
- console.debug('backdrop clicked');
+ onBackdropClick(ev: UIEvent): boolean {
ev.preventDefault();
ev.stopPropagation();
this._menuCtrl.close();
+ return false;
}
/**
@@ -502,10 +489,18 @@ export class Menu {
(this._cntEle.classList)[isOpen ? 'add' : 'remove']('menu-content-open');
- this._cntEle.removeEventListener('click', this.onContentClick);
+ this._events.unlistenAll();
if (isOpen) {
- this._cntEle.addEventListener('click', this.onContentClick);
+ let callback = this.onBackdropClick.bind(this);
+ this._events.pointerEvents({
+ element: this._cntEle,
+ pointerDown: callback
+ });
+ this._events.pointerEvents({
+ element: this.backdrop.getNativeElement(),
+ pointerDown: callback
+ });
this.ionOpen.emit(true);
} else {
@@ -612,6 +607,7 @@ export class Menu {
*/
ngOnDestroy() {
this._menuCtrl.unregister(this);
+ this._events.unlistenAll();
this._cntGesture && this._cntGesture.destroy();
this._type && this._type.destroy();
this._resizeUnreg && this._resizeUnreg();