2014-02-11 3 views
0

다른 DIV 태그에서 Onclick

두 개의 DIV 태그가 있습니다. 1) 녹색 색상은 onclick 속성이 경고 ('Clicked')로 설정된 외부 Div 태그입니다. 2) 노란색이 내부 DIV 태그입니다.

이제 내부 div 태그를 클릭하면 경고가 나타납니다. 내부 div 태그에서 항목을 선택하는 동안 동일하게 반복됩니다. inner div 태그에서 선택할 수 없습니다. 이 문제를 어떻게 해결할 수 있습니까?

더 자세히 말하면 동적으로 생성되는 중첩 된 div 태그가 있습니다. 여기에 붙어 있어요

+0

이 코드를 게시하는 것은 쉽게 우리가 문제 – 131

답변

1

외부 div까지 클릭이 전파되지 않도록해야합니다.

재 게시에 대한 미안하지만, 대답은 이미 위치에 있습니다 event.preventDefault() vs. return false

+1

에게 제공 한 링크를 이해 할 수 있도록 할 당신은 클래스, ID 등으로 특정 어린이를 제외하는이 솔루션을 조정할 수 관련성이 있지만이 질문에 완전히 대답했다고 생각하지 않습니다. –

0

에 체크 아웃. id를 적용하고 해당 id를 사용하여 onclick을 제어 할 수 있습니다.

<html><head></head> 
<body> 
<script type="text/javascript"> 
function manualToggle(val) 
{ 
    alert(val.id); 
} 

</script> 

<div id="test" onclick="manualToggle(this);"> 
    <span>Allowed to click</span> 
    <span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span> 
    <span>Allowed to click</span> 
</div> 
</body> 
</html> 
1

한 가지 해결책은 리스너가 트리거 될 때 (이 경우 클릭이 컨테이너의 아이의 어떤에서 발생하지 않았다는 것을 확인한 후에 만 ​​행동, 당신의 outer 컨테이너에 이벤트 리스너를 설정하고, , inner). 여기

$(document).ready(function() { 

    var outer = $('.outer'); 
     outer.on('click', handleOuterClick); 

    function handleOuterClick(e) {   
     //Assert that the click originated from the outer div, and not from 
     //any of its children 
     var origin = e.target, 
      children = outer.children(); 
     if(children.index($(origin)) == -1) { 
      //Proceed by displaying an alert 
      alert("You clicked the outer div!"); 
     } 

    }; 

}); 

는 바이올린의 : http://jsfiddle.net/39ssk/

관련 문제