간단한 클릭 이벤트 위임 이벤트 위임 나는 myDiv, 내 링크 및 anotherDiv의에서 클릭을 차단하고자하는 버블 링의 개념을 사용하여,

Question

내가 지금 사업부

<div class="myDiv"> 
    <a href="#" class="myLink">somelink</a> 
    <div class="anotherDiv">somediv</div> 
</div> 

이 작동하지 않습니다.

은 모범 사례에 따르면 이것은

$(document).click(function(e) { 
    var $eventElem = $(e.target); 
    var bStopDefaultClickAction = false; 

    if ($eventElem.is('.myDiv')) 
    { 
    alert('Never alerts when clicking on myLink or anotherDiv, why????'); 
    bStopDefaultClickAction = true; 
    } 

    return bStopDefaultClickAction; 
}); 

위 내 경고 질문을 참조 문서 자체에 (따라서 용어 '대표') 세계적으로 클릭을 수신하여 수행 할 수 있습니다. 나는 클릭 소리가 나기 시작했다. 문서가 실제로 클릭을 받고 위임을 시작하기 때문에 다소 효과가 있습니다. 그러나 myLink 및 anotherDiv 클릭에 대한 버블 링 메커니즘은 if 문이 실행되지 않는 것처럼 작동하지 않습니다.

또는 클릭 한 src 요소에서 할당 된 위임 객체 (이 경우 문서)? 그것은 죽은 ... 지금은 'myDiv'핸들러를 많이 그리고 아마도 다른 사람이해야하기 때문에

$('.myDiv').click(function(e) { 
    //...as before 
}); 

그러나 defeates 대표단의 목적이 종류 : 그런 경우가 있다면, 나는이 같은 위임을 처리해야 하나의 'document'이벤트 위임 객체 만 있으면됩니다.

누구나 어떻게 작동하는지 알 수 있습니까?

http://docs.jquery.com/Events/live

그래서 당신이 코드가 될 것이다 :

Answer 1

이벤트 대상은 변경되지 않습니다. jquery 라이브가하는 일을 미러링하고 $ eventElem.closest ('. myDiv')가 일치하는지 확인해야합니다.

시도 :

$(document).click(function(e) { 
    var $eventElem = $(e.target); 
    var bStopDefaultClickAction = false; 

    if ($eventElem.closest('.myDiv').length) 
    { 
    alert('Never alerts when clicking on myLink or anotherDiv, why????'); 
    bStopDefaultClickAction = true; 
    } 

    return bStopDefaultClickAction; 
}); 

Answer 2

당신은 (1.3 이후) JQuery와에서 라이브 이벤트를 사용해야합니다, 그것은 이벤트 위임을 사용하는와

$(".myDiv").live("click", function(){ 
     alert('Alert when clicking on myLink elements. Event delegation powaa !'); 

}); 

을, 당신이 가진 모든 이벤트 위임의 이점 (더 빨리, 하나의 이벤트 리스너 등), 고통없이 ;-)

Answer 3

Event.target은 항상 이벤트를 트리거 한 요소이므로 'myLink'또는 'anotherDiv'를 클릭하면 $ (e.target)을 사용하여 이러한 객체에 대한 참조를 저장합니다. $ ('. myLink').는 ('. myDiv') false를 반환하므로 alert()가 실행되지 않습니다.

$(e.target).is('.myDiv, .myDiv *') 

Answer 4

가 잘 작동하는 것 같다 : 당신이 이벤트 위임이 방법을 사용하려면 event.target이이 같이 할 수 jQuery를 사용하여 요소 또는 그 자식 중입니다 처리 여부

, 당신은 확인해야합니다 나에게. 그것을 시도하십시오 : http://jsbin.com/uwari

Answer 5

에 체크 아웃 : 한 페이지에 하나의 클릭 핸들러 난 당신이`var에 $ eventElem = $ (e.target을)해야 할 생각

var page = document.getElementById("contentWrapper"); 
page.addEventListener("click", function (e) { 
    var target, clickTarget, propagationFlag;  
    target = e.target || e.srcElement; 
    while (target !== page) { 
     clickTarget = target.getAttribute("data-clickTarget"); 
     if (clickTarget) { 
      clickHandler[clickTarget](e); 
      propagationFlag = target.getAttribute("data-propagationFlag"); 
     } 
     if (propagationFlag === "true") { 
      break; 
     } 
     target = target.parentNode; 
    } 
});