Angular2使用onmouseup事件会覆盖本机行为

Question

我目前正在使用angular2和打字稿开发应用程序。 我需要使用范围滑块输入来发送控件，我需要知道何时使用输入，即当用户拖动它时。

我尝试使用“mouseup”和“mousedown”事件的组合。 单击滑块时，触发“mousedown”事件并将“isActive”变量设置为true，然后当用户停止使用滑块时，将触发“mouseup”事件并将“isActive”变量设置为false。 / p>

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

这部分工作得很完美，但我设置了一个动作来处理“mouseup”事件的事实看起来会覆盖原生动作并且滑块永远不会被释放。

这是一个显示行为的简单的plunker：https://plnkr.co/edit/PJqFp7dFREog9rE7Shdx

是不是我没有实现必要的功能来使这项工作？或者它是来自angular2的“bug”，它不会传播事件并只是覆盖它们？

提前谢谢。

Answer 1

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

我让您的代码在方法中包含isActive分配。 看看plnkr。

行为不同的原因是因为当你做

时

isActive = true

返回true，并继续冒泡。 当你做的时候

isActive = false

返回false，并防止事件冒泡。

Answer 2

我找到了一种方法来实现这一目标。我在＆＃34; mouseup＆＃34;中添加$event.propagate()。像这样的事件：

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

但为了正常工作，我必须做到这一点是正常的吗？该事件不应该由angular2自动传播吗？