将焦点集中在与Angular中的单击其他元素冲突的元素上 [英] focusout on an element conflicting with click on other in Angular

问题描述

我在element1上有focusout()事件，在element2上有click()事件，并且当element1因为在element2上执行了单击事件而失焦时，仅触发了聚焦，单击事件不是.

I have focusout() event on element1 and click() event on element2, and when element1 goes out of focus because was performed a click event on element2, only focusout is fired, click event is not.

[在jQuery] [1]上工作正常，但在Angular中效果不佳.

This works fine [on jQuery][1] but not in Angular.

我找到了一种解决方法，方法是添加一个对角也有效的window.setTimeout().不幸的是我无法做到这一点.

I found a work around by adding a window.setTimeout() which works for angular too. Unfortunately I can not do this.

非常感谢另一个建议.

请使用setTimeout查找代码:

Please find the code with 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');
    }); 
 }

推荐答案

点击事件有问题.

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

A click event consists of 2 events, mousedown and mouseup.

您所遇到的事件的顺序是这样

The sequence of events in your case is this

1)按下鼠标 2)聚焦 3)mouseup

1) mousedown 2) focusout 3) mouseup

在1和3发生点击事件的地方.

Where 1 and 3 make a click event.

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

This can happen when an additional element, such as an error message is displayed on the page and the button on which the click is supposed to happen, moves from it's original x and y co-ordinates. Hence the mouseup happens on some other place and not where the mousedown had happened.

所以基本上我认为您的mousedown可以工作，focusout可以，但是mouseup不能.

So basically what I think is that your mousedown works, focusout works but the mouseup does not.

解决方案是使用mousedown事件而不是click.因此，您的点击不应该等待mouseup起作用.

The solution to this is to use mousedown event instead of click. So your click should not wait for mouseup to happen to work.

示例:

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

希望这会有所帮助.

这篇关于将焦点集中在与Angular中的单击其他元素冲突的元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！