글로벌 선택기를 사용하여 하나의 요소를 제외한 모든 클릭 이벤트에 어떻게 대응합니까?

Question

나는 버튼이있는 경우 :

<button id="button1"> 

은 일반적으로 내가 작성합니다

$("#button1").click(function() 
{  
    //do something 
} 

을하지만 누군가가이 버튼을 클릭하면 제외한 모든 클릭 이벤트 에 응답하는 함수를 정의합니다.

button1을 제외한 문서의 다른 모든 클릭 가능한 요소를 타겟팅 할 수있는 선택 도구가 있습니까?

Answer 1

나는 당신이 위의 대답을 받아 들였지만 나는 이것을 강력히 권고 할 것이라고 알고있다. 이벤트 위임을 사용하면 dom에 훨씬 적은 오버 헤드로 원하는 작업을 수행 할 수 있습니다.

.live()가 있지만 너무 많은 라이브 핸들러가 성능에 영향을줍니다. 나는 이벤트 위임 구식을 선호한다.

데모 here

$(function(){ 
    $('body').click(clickFn); 
    }); 

    function clickFn(ev) { 

    if (ev.target.id != 'button1'){ 
     //do your stuff 
     console.log('not a #button1 click'); 
    } 

    } 

Answer 2

당신이 사용할 수있는 :not selector :

$('button:not(#button1)').click(function(){ 
    //Do something 
}); 

위의 선택은 ID = "Button1을"을 제외한 모든 버튼 요소를 일치합니다.

당신은 body 태그에서 모든 요소를 ​​선택 정말 원한다면, 당신은 "All" (*) 선택기를 사용하고, 또한 :not(selector) 또는 .not(expr)와 요소를 제외 할 수

$('body *:not(#button1)').click(function(){ 
    //Do something 
}); 

또는

$('body *').not('#button1').click(function(){ 
    //Do something 
}); 

이벤트 버블 링 또는 전파 문제가있을 수 있으므로 event.stopPropagation 기능으로 처리 할 수 ​​있습니다.

Answer 3

현재 CSS 3 선택자 후보 권고안은 :root pseuedo class을 정의합니다.

의사 클래스는 문서의 루트 요소를 나타냅니다. HTML 4에서는 항상 HTML 요소입니다.

이벤트 수신기를 루트에 연결 한 다음 어떤 요소가 클릭을 받았는지 확인할 수 있습니다. 요소를 반환하려는 경우 무시하고 그렇지 않으면 원하는대로 수행하십시오.