2016-08-14 13 views
0

このMeteorクライアントのテンプレートイベントは、画面上をクリックした場所に応じて2回から23回まで複数回発生します。
なぜ、どのように修正するのですか?ここ clickイベントの発生回数が複数回

Template.myT.events({ 
     'click *:not(canvas)': function(e) { 
     console.log(e.target); 
     return; 
     }); 

は、コンソール

enter image description here

答えて

0

あなたはcanvas要素を除くすべての要素のclickリスナを登録から出力されます。 <p>要素内の<span>要素をクリックすると、<span>要素だけでなく、<p>要素もクリックします。このため、クリックリスナーが複数回呼び出される(イベントが伝播する)理由があります。そのような動作を防ぐには、クリックハンドラでe.stopPropagation()を使用してください。

+0

祖先HTML要素に他のハンドラが設定されている場合はどうなりますか? 'e.stopPropagation()'はそれを止めるでしょう。おそらくあなたが望むものではありません。より良い答え(imo)は、最初に多くの要素にハンドラを設定しないことです。 ''クリック*:not(canvas) ''はあまり具体的ではありません - おそらく' id'や 'class'属性を使うべきです。 –

+0

@DavidKnipeコードはキャンバスの外でクリックイベントをキャプチャする必要があります。どのように 'id'または' class'を使って解決することを提案しますか? –

+0

@FredJ。、body要素のclickイベントをリッスンし、 'e.target == theCanvasElement'をチェックします。 –

関連する問題