選擇子元素而不選擇父元素

Question

我們正在做日誌記錄，我們有一個網站的標題，在任何時候點擊它的時候我們都會記錄它。我們在元素中也有需要記錄的元素。有沒有辦法只通過使用jquery .not()函數或任何東西在頭中點擊時記錄子元素？

Here is the working jsfiddle

HTML

<div id="header"> 
    <div><a class="box blue" href="#">Blue</a></div> 
    <div><a class="box red" href="#">Red</a></div> 
    <div><a class="box green" href="#">Green</a></div> 
</div> 

CSS

$('#header').on('click', function() 
    alert('header') 
}); 
$('.box').on('click', function() { 
    alert($(this).attr('class')); 
}); 

Answer 1

您可以使用jQuery的.stopPropagation()函數從孩子到家長停止冒泡：

$('#header').on('click', function() { 
 
    alert('header'); 
 
}); 
 
$('.box').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    alert($(this).attr('class')); 
 
});

#header { padding:20px; background:yellow; overflow:auto; } 
 
    .box { width:50px; height:50px; float:left; margin:0 20px 0 0; } 
 
    .blue { background:blue; } 
 
    .red { background:red; } 
 
    .green { background:green; } 
 
\t a { color:white; display:block; text-align:center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="header"> 
 
\t <div><a class="box blue" href="#">Blue</a></div> 
 
    <div><a class="box red" href="#">Red</a></div> 
 
    <div><a class="box green" href="#">Green</a></div> 
 
</div>

Answer 2

e.stoppropagation

$('#header').on('click', function() 
    alert('header') 
}); 
$('.box').on('click', function(e) { 
    e.stoppropagation(); 
    alert($(this).attr('class')); 
}); 

http://api.jquery.com/event.stoppropagation/

Answer 3

e.stoppropagation是從子元素停止冒泡的一種方式。除此之外，您可以簡單地檢查當前目標元素是否是被點擊的元素。

$('#header').on('click', function(e) { 
if(e.target == this){ 
    alert('header'); 
} 
}); 

fiddle