2014-10-06 5 views
1

document.addEventListener('mousedown', ...) 사용자에게 시각적 피드백을 제공합니다. 그러나 역동적으로 elem.addEventListener('click')이라는 요소를 만들었습니다.이 요소는 해고되지 않습니다. 문서 mousedown listener를 제거하면 요소에 대한 클릭이 발생합니다 (또는 문서의 mousedown to click 이벤트를 변경 한 경우). 왜 그런가요? 어떻게 해결할 수 있습니까? 정말 mousedown을 처리하고 요소가 클릭/탭 이벤트를 수신 할 수 있도록 문서가 필요합니다.자바 스크립트 문서 onmousedown이 요소 onclick을 취소합니다.

FIDDLE : http://codepen.io/hpet/pen/izpJK 문서 mousedown 이벤트를 주석 처리하지 않으면 요소가 확인을 클릭하고 그렇지 않으면 요소가 트리거되지 않습니다.

Fiddle이 (가) 업데이트되었습니다. 코멘트 라인 22/23 (위치 설정)의 주석 처리는 클릭 이벤트를 발생시키지 않습니다.

+0

모든 브라우저에서이 동작을 확인 했습니까? JsFiddle/SO 자신의 스 니펫을 제공해 주시겠습니까? 우리가 당신의 코드를 이해하는데 도움이 될 것입니다. –

+0

나는 이것이 타겟 엔진이기 때문에 방금 크롬을 시험해 보았습니다. 피들을 준비 할 것입니다 ... – hpet

+0

내 원래 게시물 – hpet

답변

0

문제의 근본 원인은 겹치는 요소입니다.

mousedown 핸들러에서 사각형 요소 위로 원을 이동하면 이후의 mouseup 이벤트가 원에서 실행됩니다. 해당 이벤트가 사각형 요소에서 트리거되지 않았으므로 click 이벤트가 생성되지 않습니다.

원형 요소를 사각형 위에 두어야한다면 pointer-events CSS 규칙을 사용하여 마우스 이벤트가 원형 요소를 "통과"하도록 할 수 있습니다.