2011-11-29 3 views
8

이의 내가 레이블을 가지고 있고이 두 개의 클릭 이벤트를 첨부 해 봅시다 다른 핸들러 호출 :JQuery와 정지

$('#l1').bind('click',function(){ 
alert('label clicked'); 
} 
$('#l2').bind('click',function(){ 
alert('label2 clicked'); 
} 
$('#l3').bind('click',function(){ 
alert('label3 clicked'); 
} 

$('label').bind('click',function(){ 
if($(this).hasClass('disabled') 
return false 
} 
<label id='l1'>hi</label> 
<label id='l2' class="disabled">bye</label> 
<label id='l3'>hi</label> 

는 이제 클래스 disabled이있는 라벨을 클릭하면 경고가 표시되고 싶지 않아. 그렇게 할 수 있습니까?

참고 : alert 그냥 더미 것은 .. 내가 대신 그 일련의 작업을 수행하고 있습니다 .. 여러 이벤트 핸들러가 동일한 요소에 바인딩

답변

22

경우 실제 라벨의 기준으로 각기 다른 핸들러는 바인딩 된 순서대로 호출되는 동일한 이벤트입니다. 특정 핸들러 내에서 event.stopImmediatePropagation()으로 호출하면 후속 핸들러가 호출되는 것을 중지합니다.

$('label').bind('click',function(event){ 
    if($(this).hasClass('disabled') { 
     event.stopImmediatePropagation(); 
     return false; 
    } 
} 

및 다른 .bind() 통화보다 그 위로 이동 :

그래서 다음과 같이 $('label').bind()을 수정합니다. 그런 다음 해당 특정 처리기가 먼저 실행되고 다른 처리기가 실행되지 못하게 할 수 있습니다.

(.stopImmediatePropagation().stopPropagation()]와 동일하지 않습니다 -. 후자의 DOM 트리를 버블 링 이벤트를 중지하지만 같은 요소에 다른 핸들러를 중지하지 않습니다)

+0

한 좋은 ..... ... – ManseUK

+0

<3333333333333333333 –