专注于与Angular中的其他单击冲突的元素

Question

我在focusout()上有element1事件和click()上的element2事件，当element1失去焦点因为在element2上执行点击事件时，只有焦点被触发，点击事件不是。

这工作正常[在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');
    }); 
 }

Answer 1

这是click事件的问题。

点击事件包含2个事件，mousedown和mouseup。

您的案例中的事件序列是这样的

1）mousedown 2）聚焦3）mouseup

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

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

所以基本上我认为你的mousedown工作，焦点工作但鼠标没有。

解决方案是使用mousedown事件而不是单击。所以你的点击不应该等待mouseup正常工作。

例：

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

希望这可以帮助。