web-dev-qa-db-ja.com

Angular2でonmouseupイベントを使用すると、ネイティブの動作が上書きされます

私は現在、angular2とTypeScriptを使用してアプリを開発しています。コントロールを送信するには、範囲スライダー入力を使用する必要があります。また、入力がいつ使用されているか、つまりユーザーがいつドラッグしているかを知る必要があります。

「mouseup」イベントと「mousedown」イベントを組み合わせて使ってみました。スライダーをクリックすると、「mousedown」イベントがトリガーされ、「isActive」変数がtrueに設定されます。次に、ユーザーがスライダーの使用を停止すると、「mouseup」イベントがトリガーされ、「isActive」変数がfalseに設定されます。

<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false" />

その部分は完全に機能しますが、「mouseup」イベントで実行するアクションを設定したという事実は、ネイティブアクションを上書きするように見え、スライダーが解放されることはありません。

動作を示す簡単なプランカーは次のとおりです： https://plnkr.co/edit/PJqFp7dFREog9rE7Shdx

これを機能させるために必要な機能を実装していないのは私ですか？それとも、イベントを伝播せず、単にそれらを上書きする、angular2の「バグ」ですか？

前もって感謝します。

eventsinputrangeangular
7
David Gonzalez

https://plnkr.co/edit/KMmJVMhbnmdjVha92S5S?p=preview

isActive割り当てをメソッドでラップしてコードを機能させました。 plnkrを見てください。

動作が異なる理由は、

isActive = true

trueを返し、イベントのバブリングを続行します。そしてあなたがするとき

isActive = false

falseを返し、イベントがバブリングするのを防ぎます。

8
Romain

私はこれを機能させる方法を見つけました。次のように「mouseup」イベントに$event.propagate()を追加します。

<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false;$event.propagate();" />

しかし、それが正しく機能するために私がそれをしなければならないのは正常ですか？イベントはangular2によって自動的に伝播されるべきではありませんか？

1
David Gonzalez