jquery selector:parent problem
just a little help here for jquery selector.. the problem is when i click (".x"), the (".bigCon") will also trigger.. i just want that only the (".bigcon") will have the event of onclick then alert("black").. sorry for a bit confusing.. :D
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
$(".x").click(function(){
$(".evClick").removeClass("evClick").addClass("sample");
$(this).addClass("evClick");
}).mouseover(function(){
$(this).toggleClass("evHover");
}).mouseout(function(){
$(this).toggleClass("evHover");
});
$(".bigCon").click(function(){
alert("black");
});
});
</script>
<style>
.x {
width:100px;
height:100px;
margin:10px;
}
.bigCon {
background:black;
width:开发者_StackOverflow240px;
height:540px;
}
.sample {background:red;}
.evHover {background:green;}
.evClick {background:yellow;}
</style>
</head>
<body>
<div class="bigCon">
<div class="sample x"></div>
<div class="sample x"></div>
<div class="sample x"></div>
<div class="sample x"></div>
<div class="sample x"></div>
</div>
</body>
</html>
Look into event.stopPropagation(). You'd use it like this:
$(".x").click( function(e){
e.stopPropagation();
your_click_actions_here();
// etc
})
Click events on .x will fire, but will not bubble up the DOM tree to enclosing elements, like div.bigCon.
加载中,请稍侯......
精彩评论