ネストされた要素のmouseoverとmouseoutイベント
今日、mouseoverとmouseoutの問題を解決するのを手伝ったとき、思わなかった問題を見つけました.
問題:ネストされた3層divがあります.div 111最外層、div 222中間層、div 333最内層.
効果:マウスがdivの上にある場合、対応するレイヤのmouseoverがトリガーされ、プロパティがdivの上から離れると、対応するレイヤのmouseoutがトリガーされます.
このセグメントコードは、mouseoverとmouseoutがサブエレメントのバブルによって生じるいくつかの問題も解決します.もっと良い案があるかどうか分かりません.
問題:ネストされた3層divがあります.div 111最外層、div 222中間層、div 333最内層.
効果:マウスがdivの上にある場合、対応するレイヤのmouseoverがトリガーされ、プロパティがdivの上から離れると、対応するレイヤのmouseoutがトリガーされます.
このセグメントコードは、mouseoverとmouseoutがサブエレメントのバブルによって生じるいくつかの問題も解決します.もっと良い案があるかどうか分かりません.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style>
#div111{
width:200px; height :200px ; background :red; margin :100px auto auto 100px; border: 2px solid white;
}
#div222{
width:100px; height :100px; background :yellow; border: 2px solid white;
}
#div333{
width:50px; height :50px; background :blue; border: 2px solid white;
}
</style>
</head>
<body>
<div id="div111">
<div id="div222">
<div id="div333"></div>
</div>
</div>
<div id="log"></div>
<script type ="text/javascript" >
function mouse_over(event){
var elem = $(event.currentTarget),
fromElem = $(event.relatedTarget);
if(elem.has(fromElem).length === 0 || !fromElem.is(elem)){
elem.css('border-color', 'green');
log(elem.attr('id'), event.type);
}
};
function mouse_out(event){
var elem = $(event.currentTarget),
toElem = $(event.relatedTarget);
if(elem.has(toElem).length === 0 || !toElem.is(elem)){
elem.css('border-color', 'white');
log(elem.attr('id'), event.type);
}
};
function log(id, type){
$("#log").append("<div><span>" + id + " <strong><font color='red'>" + type + "</font></strong> </span></div>");
}
$('#div111').mouseover(mouse_over);
$('#div222').mouseover(mouse_over);
$('#div333').mouseover(mouse_over);
$('#div111').mouseout(mouse_out);
$('#div222').mouseout(mouse_out);
$('#div333').mouseout(mouse_out);
</script>
</body>
</html>