выберите дочерний элемент без выбора родительского элемента

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

Вы можете использовать .stopPropagation() функцию JQuery, чтобы остановить бульканье от детей до родителей:

$('#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