重なっているdivやcanvasに対して、タッチやマウスイベントが2重になってしまう事象を防ぐ方法

作成中のゲームではUIのボタンをcanvas上のdivに、canvasではthis.app.mouse.onやthis.app.touch.onによりタップした場所を取得して処理するようにしている場合にタッチやマウスイベントがそれぞれのエレメントで拾ってしまうため、2重になってしまいます。

実装例：

①UIのボタンは、PlayCanvasで以下のようにイベントを取得。

btn.addEventListener('click', function() { 
self.entity.script.uiGame.showPopup(); 
}, false);

②canvasの方では、以下のようにイベントを取得。

Input.prototype._onTouchStart = function(e) { 
var touch = e.changedTouches[0]; 
this._onTap(touch.x, touch.y); 
e.event.preventDefault(); 
}

Input.prototype._onMouseDown = function(e) { 
this._onTap(e.x, e.y); 
};

このとき、①を押した際でも、②がイベントを拾ってしまいます。 
①でイベントを拾った際は、mouse.onやtouch.onでの処理を無効にするような処理をご紹介します。

この事象につきまして、

PlayCanvas Touch Device とMouse device のイベントはそれぞれ"touchstart" と"mousedown"イベントにより発動します。

PlayCanvasハンドラによりボタンのイベントが発動することを防ぐにはevent.stopPropagation()ブラウザーメソッドを使用する必要があります。

しかしこれは同じイベントでしか動作しないのでclickイベントでは行うことができません。代わりにボタンでは、mousedownとtouchstartのイベントにリッスンするべきです。
これらのイベントのハンドラではPlayCanvasのイベントが発動することを防ぐ、stopPropagationを呼びます。

例:mouseイベントの場合:

var button = document.getElementById("html-button"); 
button.addEventListener("mousedown", function (e) { 
console.error("button clicked"); 
e.stopPropagation(); 
});

this.app.mouse.on("mousedown", function (e) { 
console.error("mousedown"); 
}, this);