PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > JavaScript教程 > 正文

    event.x event.clientX event.offsetX的使用和区别

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。...
    x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
    clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。
    offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
    screenX:相对于用户屏幕。

    测试一:

     
    复制代码 代码如下:
    <html>
    <head>
    </head>
    <script>
    function reload(){
    window.location.reload("http://www.bcty365.com");
    }
    </script>
    <body>
    <table>
    <TR><TD><input type="button" name="button1" value="button1" onclick="reload();"></TD><TD></TD></TR>
    <TR><TD><input type="button" name="button2" value="button2" onclick="reload();"></TD><TD></TD></TR>
    </table>
    <input type="button" name="update" value="刷新" onclick="reload();">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <input type="button" name="button" value="button" onclick="reload();">
    </body>
    </html>

    <script>
    function window.onbeforeunload()
    {
    alert('event.clientX='+event.clientX);//如果是鼠标点击“刷新”按钮,则跟鼠标点击时的位置有关
    alert('event.offsetX='+event.offsetX);
    alert('document.body.clientWidth='+document.body.clientWidth);
    alert('event.clientY='+event.clientY);
    alert('event.offsetY='+event.offsetY);
    alert('event.altKey='+event.altKey);
    if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
    {
    window.event.returnValue="确定要退出本页吗?";
    }else
    {
    alert("你在刷新");
    }
    }
    </script>
    [/html]

    测试二:
     
    复制代码 代码如下:
    <table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
    <tr><td>
    <div onclick="show()" style="background:silver;cursor:hand">
    Click here to show. 
    </div>
    </td></tr>
    </table>
    <script>
    function show(){
    alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY);
    }
    </script>

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-69-1274-1.html
    相关热词搜索: