events - Angular2 使用 onmouseup 事件会覆盖 native 行为

Question

我目前正在使用 angular2 和 typescript 开发一个应用程序。 我需要使用范围 slider 输入来发送控件，我需要知道输入何时被使用，即用户何时拖动它。

我尝试结合使用“mouseup”和“mousedown”事件。 当您单击 slider 时，将触发“mousedown”事件并将“isActive”变量设置为 true，然后当用户停止使用 slider 时，将触发“mouseup”事件并将“isActive”变量设置为 false。

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

那部分工作得很好，但事实上我设置了一个对“mouseup”事件执行的操作看起来覆盖了一个本地操作并且 slider 永远不会被释放。

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

是我没有实现必要的功能来完成这项工作吗？还是来自 angular2 的“错误”不传播事件而只是覆盖它们？

提前谢谢你。

Answer 1

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

我通过在方法中包装您的 isActive 赋值让您的代码工作。 看看 plnkr。

行为不同的原因是当你这样做的时候

isActive = true

返回true，继续事件冒泡。 当你这样做的时候

isActive = false

返回false，防止事件冒泡。