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

最新推荐文章于 2024-11-03 19:27:37 发布
最新推荐文章于 2024-11-03 19:27:37 发布
阅读量610 收藏
点赞数
文章标签： button function input table html 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/octobereva/article/details/1859352
版权

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。

clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。

offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。

screenX:相对于用户屏幕。

相关的测试页面如下：

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
  
</head>
<script>
      function reload(){
        window.location.reload("test.jsp");
      }
</script>
<body>
      <table>
        <TR><TD><input type="button" name="button1" value="button1" οnclick="reload();"></TD><TD></TD></TR>
        <TR><TD><input type="button" name="button2" value="button2" οnclick="reload();"></TD><TD></TD></TR>
      </table>
      &nbsp;<input type="button" name="update" value="刷新" οnclick="reload();">
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <input type="button" name="button" value="button" οnclick="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>

 
octobereva
关注
event.clientX和event.clientY
weixin_33935505的博客
05-05 2745
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
网页宽高clientWidth、offsetWidth、offsetTop 、offsetLeft宽高解析
林中明月间丶
05-18 3883
offsetLeft[Top]:只读 属性 当前元素到定位父级的距离（偏移值）到当前元素offsetLeft的距离 style.width:样式宽 clientWidth:样式宽+padding(可视区宽)（如果有滚动条还要包括滚动条的宽度） offsetWidth:样式宽+padding(可视区宽)+border(边框)、(不包括margin) scrollWidt......
clientWidth等指的是什么
familyX的专栏
12-17 7054
scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度） clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。scrollHeight: 获取对象的滚动高度。offsetHeight:获取对象相对于版面或由父坐标
clientWidth、clientHeight 在各大浏览器中的获取方法
前端小记
08-21 3518
IE中：  document.body.clientWidth ==> BODY对象宽度  document.body.clientHeight ==> BODY对象高度  document.documentElement.clientWidth ==> 可见区域宽度  document.documentElement.clientHeight ==> 可见区域高度  FireFox中：
【javascript坐标】——event.x、event.clientX、event.offsetX、event.screenX 用法
严文文 Chris
07-04 1928
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠...
图解 event.pageX event.clientX event.offsetX get BoundingClientRect
風缘的博客
12-12 1254
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 eve...
JS图解event.offsetX，event.clientX，event.pageX，event.screenX
hys__handsome的博客
10-25 547
javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
ldchin的博客
12-06 405
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX 设置或获...
[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect
qq_14993591的博客
09-06 444
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
event.X和event.clientX的区别分析
09-05
总的来说，`event.clientX`和`event.X`的主要区别在于它们的坐标参考系不同，`clientX`始终基于浏览器的可视窗口，而`event.X`在定位属性为"relative"时会基于触发事件的元素。在编写JavaScript事件处理函数时，正确...
js window.event对象详尽解析
10-30
4. `clientX` 和 `clientY`: 这两个属性分别返回鼠标在浏览器窗口可视区域（不包括滚动条）内的X和Y坐标，是只读属性，用于获取鼠标位置。 5. `ctrlKey`: 类似于`altKey`，`event.ctrlKey`用于检查`Ctrl`键的状态。...
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 228
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2086
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 948
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
前端之html(二)加入css开篇(一)
m0_72898512的博客
10-29 754
男女
HTML 块级元素和内联（行内）元素详解
最新发布
Allen-
11-03 53
块级元素是页面中的结构元素，它们独占一行，通常用于搭建页面的主要框架，如段落、容器、标题等。它们无论其内容多少，都会占据父元素的整个宽度。这种特性使得块级元素特别适合用于页面的整体布局和内容的分区组织。内联元素是页面中用于**修饰或嵌入小块内容的元素，它们不会独占一行，可以与其他内联元素或文本同行显示，因此也叫行内元素
HTML 标签属性——id、class、style 等全局属性详解
Allen-
11-02 148
HTML全局属性是一组可以应用于几乎所有HTML元素的特殊属性。这些属性提供了额外的功能和信息，使得网页开发者能够更好地控制元素的行为、样式和可访问性。
JavaScript深入理解window.event事件
<body onmousemove="window.status='X=' + event.clientX + ' Y=' + event.clientY"> ``` 3. **注意事项**： - 不是所有浏览器都支持`window.event`，尤其是非IE浏览器。在现代浏览器中，事件作为参数传递给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值