두 개의 서로 다른 두 개의 div에서 OnClick

Question

두 개의 div가 있고 큰 것보다 작은 것, 각 div에는 자체 OnClick 메서드가 있습니다. 내가 가진 문제는 내가 작은 div를 클릭했을 때, 큰 div의 OnClick 메서드도 호출된다는 것입니다.

누구를 피할 수 있습니까?

Answer 1

클릭 된 요소를 감지하는 가장 좋은 방법은 (이벤트를 클릭) 이벤트의 대상을 분석하는 것입니다. 나는이 사건에 대한 작은 모범을 보냈다. 아래 코드에서 확인할 수 있습니다. 당신이 당신의 스크립트

예

 
<style> 
#one 
{ 
    width: 200px; 
    height: 300px; 
    background-color: red; 
} 
#two 
{ 
    width: 50px; 
    height: 70px; 
    background-color: yellow; 
    margin-left: 10; 
    margin-top: 20; 
} 

</style> 



<div id="one" onclick="oneClick(event, this);"> 
    one 
    <div id="two" onclick="twoClick(event, this);"> 
     two 
    </div> 
</div> 

나는이 도움이 되었으면 좋겠를 실행하기 전에

 
function amIclicked(e, element) 
{ 
    e = e || event; 
    var target = e.target || e.srcElement; 
    if(target.id==element.id) 
     return true; 
    else 
     return false; 
} 
function oneClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('One is clicked'); 
    } 
} 
function twoClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('Two is clicked'); 
    } 
} 

이 자바 스크립트 방법

는 호출 할 수 있습니다.

Answer 2

click 이벤트가 요소 트리 위로 전파됩니다. 따라서 클릭 된 요소가 포함 된 각 요소는 click 이벤트도 발생시킵니다.

가장 간단한 해결책은 return false 처리기를 추가하는 것입니다.

당신이 jQuery를 사용하는 경우, 당신은 그렇지 e.stopPropagation();를 호출 할 수 있습니다, 당신은 존재하는 경우 e.stopPropagation()를 호출해야하고, event.cancelBubble = true을 설정합니다.

자세한 내용은 here을 참조하십시오.

Answer 3

www.jquery.com과 같은 javascript 라이브러리를 사용하기로 결정한 경우 전파 방지 옵션을 사용하여 수행하려는 작업을 쉽게 수행 할 수 있습니다.

Answer 4

처리중인 것은 이벤트 버블 링입니다. 이 기사를보십시오 : http://www.quirksmode.org/js/events_order.html. 이벤트 전파의 일반적인 경우에

document.getElementById('foo').onClick = function(e) { 

    // Do your stuff 

    // A cross browser compatible way to stop propagation of the event: 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
} 

Answer 5

실행중인 : 기본적으로

는 부모 요소에 통과 이벤트를 중지하려면, 다음과 같이 사용할 수 있습니다. quirksmode.org을 확인하여 정확히 무슨 일이 일어나고 있는지 자세히 알아보십시오. 기본적으로, 당신이 작은 사업부의 클릭 핸들러에서해야 할 것은 이것이다 :

if (!e) var e = window.event; 
e.cancelBubble = true; 
if (e.stopPropagation) e.stopPropagation();