选择子元素而不选择父元素

时间:2014-09-26 14:40:13

标签: jquery css

我们正在进行日志记录,我们有一个网站的标题,我们在任何时候点击它都会记录。我们在元素中也有需要记录的元素。有没有办法只使用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'));
});

3 个答案:

答案 0 :(得分:4)

你可以使用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; }
	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">
	<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>

答案 1 :(得分:2)

e.stoppropagation是阻止子元素冒泡的一种方法。除此之外,您只需检查当前目标元素是否是被点击的元素。

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

fiddle

答案 2 :(得分:1)

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/