0

http://jsfiddle.net/aQb9H/ 最好的方法是什么，不要在单击其子项时激活父项。现在，当点击孩子时，两者都被激活。

<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
$(document).ready(function(){

    $('#child').click(function(){
        $('#output').append('Child is activated ||')
    })

    $('#mother').on('mousedown',function(){
        $('#output').append('Mother is activated ||')
    })


})
</script>
</head>

<style>
#mother,#child,#output{
display:block;
color:white;
font-weight:bold;
cursor:pointer;
}
#mother{
width:100px;height:100px;
padding:30px;
margin:20px;
background-color:purple;
}
#child{
width:100px;height:100px;
background-color:orange;
}
#output{
    width:300px;height:100px;
border:2px solid red;
color:black;    
}
</style>
<body>
    <h1>Click Child, I don't want to activate mother when clicking child</h1>
<div id='mother'>
    Mother
    <div id='child'>Child</div>

</div>
<div id='output'> Output:  </div>

</body>
</html>
4

1 回答 1

1

尝试这个

演示

$('#child').on('mousedown', function(e){
    e.stopPropagation();
    $('#output').append('Child is activated ||')
})

$('#mother').on('mousedown',function(){
    $('#output').append('Mother is activated ||')
})
于 2012-12-04T05:04:49.927 回答