Home > Article > Web Front-end > jquery: Why doesn't the hover event bubble up?
How to prevent jquery hover events from bubbling
The div background color changes when the mouse passes over each div, but I don’t want the parent div of the embedded div to change color. How to do this?
I heard it was a bubbling event, but I don’t understand.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function div_hover(){ $("div").hover( function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); } ); } $(function(){ div_hover(); }); </script> <style type="text/css"> .box1{background:green;width:400px;height:400px;} .box2{background:yellow;width:300px;height:300px;} .box3{background:#cc3333;width:200px;height:200px;} .hover{background:#33cc33} </style> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
$("div").hover( function(e){ $(this).addClass("hover"); e.stopPropagation(); //这里 }, function(e){ $(this).removeClass("hover"); e.stopPropagation(); //这里 } );
Note, Event processingThe function needs to pass an eventObjecte
e.stopPropagation(); Putting it in directly has no effect Well? I forgot to show you a running version on the second floor.
The result is out, it’s very complicated.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function div_hover(){ var levels = {}; var min = 100, max = 0; var change = function() { var q = 0; for (var p in levels) { $(levels[p]).removeClass("hover"); q = Math.max(q, p); } $(levels[q]).addClass("hover"); }; var getLevel = function(element) { var level = 0; for (var parent = element; parent.parentNode; parent = parent.parentNode) level++; return level; }; $("div").hover( function(){ levels[getLevel(this)] = this; change(); }, function(){ delete levels[getLevel(this)]; $(this).removeClass("hover"); change(); } ); } $(function(){ div_hover(); }); </script> <style type="text/css"> .box1{background:green;width:400px;height:400px;} .box2{background:yellow;width:300px;height:300px;} .box3{background:#cc3333;width:200px;height:200px;} .hover{background:#33cc33} </style> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
The hover event is not used, but the effect is the same. You can refer to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .box1{background:green;width:400px;height:400px;} .box2{background:yellow;width:300px;height:300px;} .box3{background:#cc3333;width:200px;height:200px;} .hover{background:#33cc33} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("div").mouseover(function(e) { $(this).addClass("hover"); e.stopPropagation(); }); $("div").mouseout(function(e) { $(this).removeClass("hover"); e.stopPropagation(); }); }); </script> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> </body> </html>
Haha, three The effects are all different. interesting.
The above is the detailed content of jquery: Why doesn't the hover event bubble up?. For more information, please follow other related articles on the PHP Chinese website!