如何只触发可点击格内的可点击

Question

如何只触发可点击格内的可点击内部div？

如果你点击内部的蓝色框内部和外部的onclick事件触发，但我只想得到蓝色触发？

.outer { 
 
    width: 100px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    background: green; 
 
    } 
 
    
 
.inner { 
 
    width: 50px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    background: blue; 
 
}

<div class="outer" onclick="alert('Hello world from outside');" role="button" tabIndex="-1"> 
 
    <div class="inner" onclick="alert('Hello world form inside');" role="button" tabIndex="-1"> 
 
    </div> 
 
</div>

不知道如果有必要提一下，但我想在使用SASS反应解决这个问题。

Answer 1

使用event.stopPropagation();此方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

<div class="outer" onclick="alert('Hello world from outside');" role="button" tabIndex="-1"> 
    <div class="inner" onclick="alert('Hello world form inside');event.stopPropagation();" role="button" tabIndex="-1"> 
    </div> 
</div> 

Answer 2

使用

event.target 

这样的：

HTML

<div class="_div" data-div="1"><div class="_div" data-div="2"></div></div> 

的js

var match = document.querySelectorAll("._div"); 
for(var i = 0; i <= match.lenght; i++){ 
    match.item(i).addEventListener('click', function(event){ 
    console.log("div clicked:"event.target) 
    if(event.target.dataset.div == "2"){ // do something ... } 
    }) 
} 

Answer 3

试试这个：

function fun(msg) { 
 
    alert(msg); 
 
    event.stopPropagation(); 
 
}

.outer { 
 
    width: 100px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    background: green; 
 
    } 
 
    
 
.inner { 
 
    width: 50px; 
 
    height: 50px; 
 
    cursor: pointer; 
 
    background: blue; 
 
}

<div class="outer" onclick="fun('Hello world from outside');" role="button" tabIndex="-1"> 
 
    <div class="inner" onclick="fun('Hello world form inside');" role="button" tabIndex="-1"> 
 
    </div> 
 
</div>