javascript中鼠標有截斷現(xiàn)象（進入上層元素，沒進入下層元素）解決方案

例 12.2  onmousemove事件
馬克- to-win：馬克 java社區(qū)：防盜版實名手機尾號： 73203。
馬克-to-win：本例子中兩個元素，不是嵌套重合元素（參見第10節(jié)），所以事件肯定先進入上層元素，所以鼠標有截斷現(xià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");

    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：本例通過事件派發(fā)解決上個例子的問題。

<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");
/*你會發(fā)現(xiàn)，除正常以外，當dispatchEvent時，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時才用到。*/     
詳情請見：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>