javascript中鼠標(biāo)有截?cái)喱F(xiàn)象(進(jìn)入上層元素,沒(méi)進(jìn)入下層元素)解決方案
例 12.2 onmousemove事件
馬克- to-win:馬克 java社區(qū):防盜版實(shí)名手機(jī)尾號(hào): 73203。
馬克-to-win:本例子中兩個(gè)元素,不是嵌套重合元素(參見(jiàn)第10節(jié)),所以事件肯定先進(jìn)入上層元素,所以鼠標(biāo)有截?cái)喱F(xiàn)象(進(jìn)入上層元素,沒(méi)進(jìn)入下層元素)解決方案見(jiàn)下面一個(gè)例子。
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<div id="divtest" style="position:absolute;width:300px;height:300px;background:#999;">
</div>
<div id="img" style=" z-index:1; position:absolute; width:0px; height:0px; left:0px;top:0px"><img src="1.jpg" /></div>
<script>
var car = document.getElementById("img");
function move(event)
{
var event = event || window.event;
car.style.left = event.clientX ;
car.style.top = event.clientY;
}
document.getElementById("divtest").onmousemove=move;
</script>
例 12.2_b
馬克-to-win:本例通過(guò)事件派發(fā)解決上個(gè)例子的問(wèn)題。
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<div id="divtest" style="position:absolute;width:300px;height:300px;background:#999;">
</div>
<div id="img" style=" z-index:1; position:absolute; width:0px; height:0px; left:0px;top:0px"><img src="1.jpg" /></div>
<script>
var car = document.getElementById("img");
var myEventx;
var myEventy;
function move(event)
{
var event = event || window.event;
// alert("move");
/*你會(huì)發(fā)現(xiàn),除正常以外,當(dāng)dispatchEvent時(shí),event.clientX總為undefined,所以提前就得myEventx=event.clientX;*/
// alert("ok"+"event.clientX is "+event.clientX);
if(event.clientX==undefined) event.clientX=myEventx;
if(event.clientY==undefined) event.clientY=myEventy;
car.style.left = event.clientX ;
car.style.top = event.clientY;
}
function move1(event)
{
var t = document.getElementById('divtest')
var event = event || window.event;
// alert("ok11111"+"event.clientX is "+event.clientX);
/*下面兩句話是dispatchEvent時(shí)才用到。*/
詳情請(qǐng)見(jiàn):http://lygongshang.com/membership.html
{
var evt = document.createEvent('HTMLEvents');
evt.initEvent('mousemove', true, true);
t.dispatchEvent(evt);
}
}
document.getElementById("divtest").onmousemove=move;
document.getElementById("img").onmousemove=move1;
</script>