2014-12-04 2 views
1

아래 코드에서 bluroverByClickOnLink를 올바른 값으로 설정하는 방법이 있습니까? (마우스 오버 또는 다른 포인터 이벤트를 사용하지 않고 클릭이 발생하기 전에 설정하십시오)? 사용자가 링크를 클릭하여 텍스트 상자를 흐리게하는 경우 true이고, 사용자가 Tab 키를 사용하여 텍스트 상자를 흐리게하거나 다른 곳을 클릭하면 false입니다. 좀 봐 주셔서 감사합니다!onblur - 클릭 한 내용을 나타내는 방법; 또는 onclick 이벤트가 실행되기를 기다리는 지 알 수있는 방법

<html> 
<body> 
<input id="myInput" type="text" onblur="var blurredByClickOnLink='???'; console.log('input onblur. blurred by click on link = ' + blurredByClickOnLink);" /> 
<br/><br/> 
<a id="myLink" href="javascript:console.log('a href');void(0);" onclick="console.log('a onclick');">Link</a> 
</body> 
</html> 

답변

2

DOM에서 이벤트가 발생하면 해당 이벤트는 자연적으로 "원자 적"입니다. 즉, 이벤트가 이벤트 큐에서 처리되고 그 다음 이벤트 만 처리됩니다. 이러한 이벤트는 어떤 방식 으로든 "그룹화"되어 있지 않습니다.

입력 요소가 포커스를 잃으면 blur 이벤트가 발생합니다. 이 시점에서 blur에 대한 질문을 할 수 있습니다. 그러나 나머지 환경에는 다른 상태 변화가 없습니다. 다음에 일어나는 일은 이벤트가 발생할 수있는 link 요소의 클릭 일 수 있습니다. 이 경우 링크의 클릭 이벤트입니다. 이들이 하나씩 차례로 발생하기 때문에 처음에는 입력에 흐림이 발생하고 나중에는 ... 링크를 클릭하면 흐림이 발생하면 그 다음 일이 발생한다는 것을 알 수 없습니다. 링크가 아직 일어나지 않았으므로

하나의 가능한 솔루션은 입력 흐림 효과에 짧은 타이머를 설정하는 것입니다. 이 타이머는 다음 질문을하는 다른 기능 (말하자면 100msecs)을 발사 할 수 있습니다. 링크를 클릭 했습니까?

이것은 퍼즐에 충분할 수 있습니다.

이러한 문제에 대해 생각하는 데 도움이되는 방법은 브라우저가 하나씩 처리하여 DOM 상태를 변경하는 요청 대기열 (대기열)을 시각화하는 것입니다. 스스로에게 물어보십시오. "요청을 처리 할 때 결정을 내리는 데 필요한 것이 있습니까?"

+0

고마워요! 그래서 내가 바라는 것 (블러 이벤트 내부의 다가오는 클릭 이벤트에 대한 정보)은 수행 할 수 없습니다. 블러 이벤트가 아는 한 아직까지 아무 것도 클릭되지 않았기 때문입니다. 필요한 동작을 수행하기 위해 setTimeout (각 요소의 클릭 이벤트에서)을 사용할 수 있습니다. 이벤트 큐의 작동 방식에 익숙하지 않지만 이벤트 큐의 내용을 확인하기 위해 blur 이벤트의 코드에 대한 방법이없는 것처럼 들립니다. – Kwateco

+0

그게 전부예요. 브라우저가 초고속 카메라와 상호 작용하는 것을 상상해보십시오. 입력 필드에서 마우스를 움직이면 흐림 이벤트가 발생하고 이후 이벤트 (예 : 클릭)가 발생하기 전에 처리 할 수 ​​있습니다. – Kolban

+0

onmousedown이 실행되는 동안 onblur 이벤트가 대기 중인지 여부를 알려주는 방법에 대해 처음 질문했던 것보다 더 좋은 질문이라고 생각합니다. 흐림 및 클릭과 달리 mousedown 및 흐림 효과는 동시에 발생하지만 mousedown 이벤트가 먼저 실행됩니다. 더 좋은 질문에 대한 구체적인 예는 다음과 같습니다. 이 피들에서 - http://jsfiddle.net/85r4vfqg/14/ - 변수 listOfBlurEventsWaitingToRun은 더 유용한 것으로 채울 수 있습니다. 특히 여러 요소가있는 경우 흐림 이벤트가 발생합니까? 그리고 activeElement를 보지 않고? "이벤트 대기열"을 직접 볼 수 있습니까? – Kwateco