2013-02-11 2 views
3

나는 사용자 정의 메뉴 선택 버튼을 가지고 있으며 으로 HTML 클릭 이벤트를 바인딩했습니다. 그러나이 사건은 두 차례에 걸쳐 발포하고있다.jQuery HTML 클릭 이벤트 2 번 실행

http://jsfiddle.net/GnzBj/1/

$(function() { 
    $('html').click(function() { 
     console.log('html'); 
    }); 
}); 

모든 사람이 알고 왜/어떻게 두 번 해고를 방지하기 위해?

+0

'html' 엘리먼트에 바인딩하고 있기 때문에 기분이 좋습니다 ... –

+1

'select' 엘리먼트의'click' 이벤트에 바인딩하는 것은 어떨까요? http://jsfiddle.net/XzKqC/ –

+0

@ Calvin.Allen은 요소를 클릭하여 닫는 역할을하기 때문입니다. – Petah

답변

5

이벤트가 두 번 실행되는 이유는 전체 UI가 label 안에 있기 때문입니다.

<div ...> 
    <label for="xmod-form-51183d51afa3d" ... > 
     <select name="theme" id="xmod-form-51183d51afa3d" ...> 
      ... 
     </select> 
     ... 
    </label> 
</div> 

레이블을 클릭하면 관련된 양식 요소에서 클릭 이벤트가 트리거됩니다.

label 요소를 제거하면 예상대로 작동합니다 (http://jsfiddle.net/GnzBj/5/).

label이 필요한 경우 가능한 한 UI가 적게 두지 만 클릭하면 여전히 두 가지 이벤트가 트리거됩니다.

+0

왜 downvote? –

+0

이중 사격의 기술적 이유는 무엇입니까? – Yahel

+0

@yahelc : 라벨 작업 방식입니다. 확인란이나 라디오 버튼에 적합합니다. 라벨을 클릭하면 확인란/라디오 버튼도 선택됩니다. 내가 적절한 참조를 찾을 수 있는지 보게 될 것이다. –