angular – 移动目标元素时不会触发Click处理程序

发布时间：2020-12-17 17:29:43 所属栏目：安全来源：网络整理

导读：请考虑以下演示 https://stackblitz.com/edit/angular-pur1dt 我有反应式表单控件,同步验证程序和错误消息显示在字段下面无效时. 当控制失去焦点时,将触发验证.控件下方有一个带有点击处理程序的按钮.问题是,当我单击按钮时,控件失去焦点,验证发生,显示错误

请考虑以下演示 https://stackblitz.com/edit/angular-pur1dt

我有反应式表单控件,同步验证程序和错误消息显示在字段下面无效时.

当控制失去焦点时,将触发验证.控件下方有一个带有点击处理程序的按钮.问题是,当我单击按钮时,控件失去焦点,验证发生,显示错误消息并向下移动按钮.据说这可以防止点击处理程序执行.任何建议为什么会发生这种情况以及如何解决问题？

我已经用评论更新了演示.注意：输入下方的仅按钮将重现该问题.第一次单击它后,标题不会更新.

解决方法

该问题似乎与触发订单的DOM事件有关

据MDN称：

The click event is fired when a pointing device button (usually a
mouse’s primary button) is pressed and released on a single element.

https://developer.mozilla.org/en-US/docs/Web/Events/click

在给定的示例中,元素会在您模糊输入的那一刻移动 – 因为验证会立即发生,显示错误并重新定位按钮.

因此,鼠标在按钮上方时会关闭,但是当它向上时 – 按钮会重新定位.所以点击不会在按钮上触发

有几种方法可以解决这个问题：

>在mousedown延迟错误揭示
>隐藏错误,直到mousedown和mouseup都发生,如果mousedown发生在按钮上
>等

这是mousedown事件处理的一个例子
https://jsfiddle.net/gjbgqqpo/

希望这可以帮助：)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!