event.x,event.clientX,event.offsetX区别

 更新时间:2006年11月09日 00:00:00   作者:  
event.x,event.clientX,event.offsetX区别,需要的朋友可以参考下。
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。
offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。
测试代码一:
[code]
<html>
<head>
</head>
<script>
function reload(){
window.location.reload("https://www.jb51.net");
}
</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>
&nbsp;<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]
演示代码二:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
您可能感兴趣的文章:

相关文章

  • 详解CommonJS和ES6模块循环加载处理的区别

    详解CommonJS和ES6模块循环加载处理的区别

    这篇文章主要介绍了详解CommonJS和ES6模块循环加载处理的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Add Formatted Text to a Word Document

    Add Formatted Text to a Word Document

    Add Formatted Text to a Word Document...
    2007-06-06
  • Layui实现带查询条件的分页

    Layui实现带查询条件的分页

    这篇文章主要为大家详细介绍了Layui实现带查询条件的分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 移动端H5唤起APP的写法实例(IOS、android)

    移动端H5唤起APP的写法实例(IOS、android)

    最近在做扫码之后的h5页面唤醒App的功能,所以记录一下,这篇文章主要给大家介绍了关于移动端H5唤起APP的相关资料,需要的朋友可以参考下
    2021-07-07
  • PHP实现本地图片上传和验证功能

    PHP实现本地图片上传和验证功能

    这篇文章主要为大家详细介绍了PHP实现本地图片上传和验证功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript获取两个数组交集的方法

    JavaScript获取两个数组交集的方法

    这篇文章主要介绍了JavaScript获取两个数组交集的方法,涉及javascript针对数组的相关操作技巧,需要的朋友可以参考下
    2015-06-06
  • PixiJS学习之Sprite类的使用详解

    PixiJS学习之Sprite类的使用详解

    Sprite 直译为 “精灵”,是游戏开发中常见的术语,就是将一个角色的多个动作放到一个图片里,通过裁剪局部区域得到当前的角色状态图。本文主要介绍了PixiJS中Sprite类的使用,需要的可以参考一下
    2023-02-02
  • JS将光标聚焦在文本最后的实现代码

    JS将光标聚焦在文本最后的实现代码

    这篇文章主要介绍了JS将光标聚焦在文本最后的方法,需要的朋友可以参考下
    2014-03-03
  • JavaScript图片打印方案实例详解

    JavaScript图片打印方案实例详解

    有时候我们希望文件上传的时候预览图片,下面这篇文章主要给大家介绍了关于JavaScript图片打印方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • js将类数组对象转换成数组对象

    js将类数组对象转换成数组对象

    javascript与dom有许多瑕疵,如著名的类数组对象Arguments,其他诸如HTMLCollection,NodeList如果它们都是数组的子类,那多省时啊。
    2010-05-05

最新评论