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


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


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