Node.js는 click과 dblclick events_javascript 기술 간의 충돌을 불완전하게 해결합니다.-JS 튜토리얼-php.cn

Node.js는 click과 dblclick events_javascript 기술 간의 충돌을 불완전하게 해결합니다.

WBOY

풀어 주다： 2016-05-16 17:51:48

원래의

1204명이 탐색했습니다.

상황 설명
div와 같은 요소가 click 및 dblclick 이벤트 모두에 바인딩되어 있고 이 두 이벤트가 상대적으로 독립적인 비즈니스를 처리해야 하는 경우, 즉 클릭 시 dblclick이 트리거될 수 없고 dblclick이 트리거될 수 없습니다. 트리거 클릭. 실제 테스트에서는 dblclick 시 항상 1번의 클릭이 발생하는 것으로 나타났습니다. 이 문제는 아래에서 해결될 것입니다.
상황 분석
먼저 click과 dblclick의 실행 순서를 이해해야 합니다. 테스트 과정을 간략히 설명하면 다음과 같습니다.
클릭: mousedown -- mouseup -- click
dblclick: mousedown -- mouseup - - click -- mousedown -- mouseup -- click -- dblclick
이런 관점에서 보면 dblclick이 발생하기 전에는 실제로 2번의 클릭이 실행되며 첫 번째 클릭은 차단됩니다. (왜? 글쎄요, 나도 모르겠어요).
해결책
가장 먼저 떠오르는 것은 이벤트를 중지할 수 있는지 여부인데, 브라우저에서 해당 메서드를 제공하지 않는 것을 발견했습니다. 클릭 이벤트가 취소 가능하도록 만들어야 합니다.
그래서 제가 생각할 수 있는 유일한 해결책인 지연을 사용하는 것을 고려했습니다. 클릭 이벤트 처리 완료를 지연하려면 setTimeout()을 사용하고, 클릭을 차단해야 할 경우에는 ClearTimeout()을 사용하면 됩니다.
특정 코드

코드 복사 코드는 다음과 같습니다.

 
var test = ( function() { 
var clickText = '클릭
'; 
var dblclickText = 'dblclick
' 
var 타이머 = null 
클릭: 함수( ){ 
clearTimeout(timer); 
timer = setTimeout(function(){ 
$('body').append(clickText); 
}, 300), 
dblclick: function(){ 
clearTimeout(timer); 
$('body').append(dblclickText) 
}, 
init: function(){ 
$( function() { 
$('div').click(test.click).dblclick(test.dblclick) 
}) 
} 
})(); 
 test.init(); 

 
html 코드

코드 복사 코드는 다음과 같습니다. 다음:

클릭
또는
dblclick

 
후속 작업
 제목에 언급된 대로 기사의 경우 완벽하지는 않습니다. Windows에서는 마우스의 두 번 클릭 속도를 제어판에서 조정할 수 있기 때문에(다른 시스템은 잘 모르겠습니다) 시스템 설정의 두 번 클릭 속도를 속도가 느려지면 위의 데모가 적용되지 않습니다. 따라서 300밀리초는 근사치일 뿐입니다. 

저자: 후이루이