Js中event对象的x,clientX,offsetX区别

最新推荐文章于 2021-10-25 21:19:37 发布
最新推荐文章于 2021-10-25 21:19:37 发布
阅读量9k 收藏 1
点赞数 1
分类专栏： Javascript 文章标签： fun html border function table div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinyiniao/article/details/5197809
版权

 Js中event对象的x,clientX,offsetX三者主要区别含义如下：

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

     

     

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

     

     

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

     

     

  • screenX:相对于用户屏幕。

  •  

    可从下边的代码：

虫子68
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
liuxuefeng521的博客
01-26 388
版权声明：本文为博主原创文章，未经博主允许不得转载。 通过 3 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： [html] view plain copy >   html lang="zh-
区别 JavaScript Event 对象中的clientX,offsetX,screenX,pageX之间关系
qq_36552707的博客
01-18 292
javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下 event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性; event.pageX、event.pageY 类似于event.clientX、ev...
JS图解event.offsetX，event.clientX，event.pageX，event.screenX
hys__handsome的博客
10-25 529
javascript window.event.clientX in Firefox and cursor:pointer
weixin_30460489的博客
12-29 83
firefox下如何实现window.event.clientX ff的事件传递 在IE中,event.clientX,event.clientY可以用,但是在FF中是不可以的,因为event在IE中是一个全局变量,在FF中是局部变量,所以在FF中使用event对象必须通过参数传递的方式把它传入过程中. <a ōnMouseOver="showad(event,'id')">Sh...
JS window.event 详解
ritaleo的专栏
11-27 169
1. window.event属性  altKey:alt是否按下  button:鼠标按下的值   可能的值：    0 没按键    1 按左键    2 按右键    3 按左右键    4 按中间键    5 按左键和中间键    6 按右键和中间键    7 按所有的键  这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件，不管鼠标...
event.X和event.clientX的区别分析
09-05
在处理鼠标事件时，我们常常会遇到`event.X`和`event.clientX`这两个属性，它们都是用来获取鼠标位置的，但有微妙的差别。 `event.clientX`属性返回的是鼠标指针在浏览器的可视窗口（客户区域）内的X坐标，不包括...
js Event对象的5种坐标
12-07
JavaScript中的Event对象是处理用户交互和页面事件时不可或缺的一部分，它包含了与事件相关的各种信息，如事件类型、触发事件的元素、鼠标位置等。在不同的浏览器中，Event对象提供的坐标属性不尽相同，这给开发者...
js window.event对象详尽解析
10-30
JavaScript中的`window.event`对象是浏览器内置的一个全局变量，它提供了关于当前正在处理的事件的信息。这个对象在事件处理函数内部可用，包含了与事件相关的各种属性和方法，如按键状态、鼠标位置等。下面我们将...
javascript Event对象详解及使用示例
12-08
JavaScript中的Event对象是处理事件的核心，它包含了与事件相关的各种信息，如事件源、按键状态、鼠标位置等。Event对象是在事件发生时由浏览器自动创建的，它在事件发生期间有效，之后会被销毁。理解并熟练运用...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
12-09
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将深入探讨这些属性的含义、用途及其在不同浏览器中的差异。 1. ...
JS clientX、offsetX、pageX、screenX
zhumizhumi的博客
07-04 2307
因为要写拖拽、拉伸，所以去查了有关这方面的博客，然后发现每一篇博客说的都不一样。。。，我的这篇博客是按照我自己的理解来解释的，有错误的话，欢迎指正【我也不能肯定100%正确】 一：图形解释 二：书面解释【根据英文单词意思，也可以猜个八九不离十】 screen：屏幕 1.作用对象：鼠标点 2.坐标中心点：电脑屏幕左上角 3.screenX：鼠标点距离电脑屏幕左边的距离；screen...
clientX,clientY,x,y等的区别[转]
peswe的专栏
03-25 661
clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0； offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0； screenX, screenY是相对于用户显示器的位置 x,y是鼠标相对于当前浏览器的位置 Measure...
js e.offsetX 和 e.offsetY
JDDDDDDyaya的博客
11-07 2208
本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetY e.offsetX 与 e.offsetY 下相对与事件源的距离，也就是e.target， 大家看下面例子,给出几张截图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name
js offset
qq_39132756的博客
10-06 356
                                                   js offset知识点 一：offsetHight,offsetWidth 获取对象的宽度和高度(自己的，与他人无关)!!! //offsetWidth = width + border + padding div { width:200px; border:10px s...
JS之获取offsetX 的方法
czw333的专栏
11-30 1704
// 该方法经过IE6 FF3.5的测试 function getOffsetX(evt){ if( evt.offsetX ) return evt.offsetX; var ele = evt.target || evt.srcElement; var o = ele; var x=0; while( o.offsetParent...
clientX,pageX,x,screenX,offsetX等的区别
ssisse的博客
06-01 2584
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛
js中event对象的offsetX、 clientX、pageX、screenX、 layerX、x之间的区别
fengzhen8023
08-06 1266
我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量，但是有的时候有搞不清楚他们之间的区别，甚至被搞得一头雾水。 这里给大家总结了一下他们之间的区别，而且使用图片给大家清晰的展示出来。 **图片是从其他大神那里字节拿过来用的，这是大神的原博客 [江波的博客](http://www.cnblogs.com/jiang...
clientX、offsetX、screenX、pageX、x的区别
weixin_45725020的博客
12-09 497
div{ height: 100px; width: 100px; background-color: red; } <div></div> var div = document.getElementsByTagName('div')[0]; div.onclick= function (e){ console.log(e) } ...
JavaScript Event对象详解 - 高罗峰课件
在JavaScript中，`window`对象是全局对象，它代表浏览器的窗口，而`event`对象则是JavaScript中处理用户交互的核心部分。本课件由高罗峰讲解，涵盖了`window`对象和`event`对象的多个关键属性，帮助开发者理解如何...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值