event兼容,clientX,pageX,offsetX和screenX的區(qū)別


馬克- to-win：馬克 java社區(qū)：防盜版實名手機尾號： 73203。
例 3.1：event兼容,clientX,offsetX和screenX的區(qū)別，圖片移動。


clientX 設(shè)置或獲取鼠標指針位置相對于窗口客戶區(qū)域的 x 坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
pageX：參照點也是瀏覽器內(nèi)容區(qū)域的左上角，但它包括滾動條，即不會隨著滾動條而變動
offsetX 設(shè)置或獲取鼠標指針位置相對于觸發(fā)事件的對象的 x 坐標。包括滾動條。
screenX 設(shè)置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。
馬克-to-win：做實驗時，可以選擇四個地點，一個是窗口最左邊，一個就是有字的最左邊，最后一個選擇窗口的最右邊。這時出現(xiàn)滾動條，按右箭頭到頭，點擊，你會發(fā)現(xiàn)區(qū)別。



<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<div  style=" position:absolute; left:200px;top:200px">
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
    acdsacdaddscsavfdvdfavvavdav<br>
</div>  
<div id="img" style=" z-index:1; position:absolute; left:0px;top:0px"><img src="1.jpg" /></div>
<script>
    var car = document.getElementById("img");




    function move(event)
    {

        var event = event || window.event;
/*clientX 設(shè)置或獲取鼠標指針位置相對于窗口客戶區(qū)域的 x 坐標，其中客戶區(qū)域不包括窗口自身的控件和滾動條。
offsetX 設(shè)置或獲取鼠標指針位置相對于觸發(fā)事件的對象的 x 坐標。
screenX 設(shè)置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。
馬克-to-win：做實驗時，可以選擇三個地點，一個是窗口最左邊，一個就是有字的最左邊，最后一個選擇窗口的最右邊。
*/
        alert("event.clientX is "+event.clientX+"event.pageX is "+event.pageX+"event.offsetX is "+event.offsetX+"event.screenX is "+event.screenX);      
        car.style.left =  event.clientX ;
        car.style.top =  event.clientY;
    }
    document.onmousedown=move;
</script>