例 12.2 onmousemove事件
本例子中两个元素,不是嵌套重合元素(参见第10节),所以事件肯定先进入上层元素,所以鼠标有截断现象(进入上层元素,没进入下层元素)解决方案见下面一个例子。
<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").οnmοusemοve=move;
</script>
例 12.2_b
马克-to-win:本例通过事件派发解决上个例子的问题。
<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)
{
更多请见:https://blog.csdn.net/qq_43650923/article/details/102988342
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。