Отбросить функцию в JavaScript?

Question

Когда я нажимаю mainDiv, вызывается функция mainDiv(), , когда я нажимаю subDiv, вызываются функции mainDiv() и subDiv().

Я хочу вызвать только функцию subDiv(), когда я нажимаю subDiv. Как я могу это достичь?

КОД:

<div onclick="mainDiv()"> 
    show main div 
    <div onclick="subDiv()"> 
    show sub div 
    </div> 
</div> 
<script type="text/javascript"> 
    function mainDiv(){ 
    alert("main div is clicked"); 
    } 
    function subDiv(){ 
    alert("sub div is clicked"); 
    } 
</script> 

Answer 1

использование e.stopPropogation()

HTML

<div onclick="subDiv(event)"> //<--- pass event parameter 

javascr ф

function subDiv(e){  

    if(e.stopPropagation){ // check stoppropogation is avilable 
     e.stopPropagation(); //use stopPropogation 
    }else{ 
     e.cancelBubble = true; // for ie8 and below 
    } 
    alert("sub div is clicked"); 
} 

Answer 2

Вы можете использовать stopPropagation во всех браузерах, кроме IE8 (и более старые из одной и той же компании). Но если вы хотите, чтобы быть совместимым, вы должны использовать решение described in quirksmode:

<div onclick="subDiv(event)"> 

    function subDiv(e){ 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
    alert("sub div is clicked"); 
    } 

Demonstration

Answer 3

Попробуйте

<div onclick="mainDiv()"> 
     show main div 
     <div onclick="subDiv(event);"> 
     show sub div 
     </div> 
    </div> 
    <script type="text/javascript"> 
     function mainDiv(){ 
     alert("main div is clicked"); 
     } 
     function subDiv(arg){ 
     arg.stopPropagation(); 
     alert("sub div is clicked" + arg); 

     } 
</script> 

Для поддержки IE 8 и более низкое использование arg.cancelBubble

Answer 4

<script type="text/javascript"> 
function mainDiv() { 
    alert("main div is clicked"); 
} 
function subDiv(e) { 
    if (!e) 
     e = window.event; 

    //IE9 & Other Browsers 
    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } 
    //IE8 and Lower 
    else { 
     e.cancelBubble = true; 
    } 
    alert("sub div is clicked"); 

}