时间戳

首页 > 解决方案 > 在 Angular 中与单击其他元素冲突的元素上的焦点

angular - 在 Angular 中与单击其他元素冲突的元素上的焦点

问题描述

我有focusout()event onelement1和click()event on element2，当element1因为在 on 上执行了 click 事件而失去焦点时element2，只会触发 focusout，而不会触发 click 事件。

这在[在 jQuery][1] 上工作正常，但在 Angular 中不行。

window.setTimeout()我通过添加也适用于角度的方法找到了解决方法。不幸的是我不能这样做。

非常感谢另一个建议。

请使用 setTimeout 找到代码：

$('#txtName').on("focusout",function(event) {
    //Alternate solution required for `setTimeout`.
    window.setTimeout( function() {alert('focus gone');},1000); }); 

    $('#button1').on('click',function(){
       alert('button click');
    }); 
 }

标签： angularclickfocusout

解决方案

这是点击事件的问题。

点击事件由两个事件组成，mousedown 和 mouseup。

在您的情况下，事件的顺序是这样的

1) mousedown 2) focusout 3) mouseup

其中 1 和 3 进行点击事件。

当页面上显示其他元素（例如错误消息）并且应该发生单击的按钮从其原始 x 和 y 坐标移动时，可能会发生这种情况。因此 mouseup 发生在其他地方，而不是 mousedown 发生的地方。

所以基本上我认为你的 mousedown 有效，focusout 有效，但 mouseup 无效。

解决方案是使用 mousedown 事件而不是单击。因此，您的点击不应等待 mouseup 发生。

例子：

<input type="text" (focusout)="someMethod()">
<button (mousedown)="someMethod()">Click Me!</button> //Changed (click) to (mousedown)

希望这可以帮助。

推荐阅读