首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性....,offsetY 这几个属性是“鼠标事件对象”下的属性,所以必然是“鼠标事件”发生时候才会有意义; clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover...margin: 50px; border: none; width: 100px;height: 50px;background: green; } 接下来是js...下图可以看到当鼠标移动事件onmousemove发生的时候,在id为div的里面显示clientX,clientY,screenX,screenY,的值; ?...上图中 相对于“整个显示屏幕区域而言” 鼠标的x坐标是200px,y坐标是85px,所以screenX和screenY正是获取这两个值,所以screenX是200px,screenY是85px ?

94040
您找到你想要的搜索结果了吗?
是的
没有找到

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

执行顺序:mousedown —> mouseup —> click 区别:mouseover和mouseout子元素也会触发,可以冒泡触发 区别:mouseenter和mouseleave是针对侦听的对象触发...submitHandler(e){ e.preventDefault(); //e.returnValue=false;//IE8 及以下兼容写法 } MouseEvent对象...打印出MouseEvent对象内容: document.body.addEventListener("mousedown",clickHandler); function clickHandler(e...screenY screenX screenY 相对屏幕左上角的位置 总结: clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。...layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 pageX,pageY相对页面左上角的距离 screenX screenY

2.2K20

js对象

课程目标: 1.掌握面向对象的基本操作. 2.掌握构造函数的优化策略. 3.创建对象的方式. 1.创建对象的三种方式: <!....方法名=function() { //输出内容 } let 对象名=new Object(); 对象名.属性; 对象名.方法名(); //第二种方式: let 对象名={}; 对象名.属性名=属性;...对象名.方法名=function() { 输出内容 } //第三种方式: let 对象名={ 属性名:属性值, 方法名:function() { 输出内容 } }; 总结: 记住,对象有属性&&方法才能叫做对象...方法是对象调用的 效果: ? 工厂函数 <!...1.调用对象是一样的,比如我爱你。他也爱你.是不是爱的是一个人啊。 2.调用构造函数是不一样的,为什么,因为他是类中的。类是一个整体不是个体啊. 效果: ? <!

6.8K10

JS面向对象

面向对象和面向过程区别面向对象是把构成问题的事物拆解为各个对象,来描述这个事物在当前问题中的行为,而不是为了实现某个步骤 面向过程,是分析出实现问题的每个步骤,然后编写函数,并依次调用。...面向对象特点封装 让使用的人不考虑内部实现,只考虑功能使用,把内部代码保护起来,提供api接口让用户调用继承 从父类继承出一些方法和属性,利于代码复用多态 不同对象作用于同一操作产生不能效果JS三大对象宿主对象所有非本地对象都属于宿主对象所有...DOM和BOM对象都属于宿主对象嵌入到网页的JS来说,宿主对象就是浏览器提供的,比如:Window和Documnet等本地对象包括:Object、Array、Date、RegExp、Boolean、Number...、String这些引用类型在运行过程中需要通过new来创建所需的实例对象内置对象是本地对象的子集在ECMAScript程序开始执行前就存在,本身就是实例化内置对象,开发者无需再实例化内置独享有Global...构造函数/创建实例 通过this添加的对象和属性都指向当前对象,所以在实例化的时候,通过this添加的方法和属性都会在内存中复制一份。

8910

js对象属性

这个要和new关键字有关了,其关键的四个步骤是创建新的对象,然后构造函数的作用域指向新对象(this指向新对象),执行构造函数中的代码,返回新对象。所以自然通过this赋值的都是新对象的属性了。...2 继承原型要在实例化对象之前,写在调用之前是无效的。...(let p in zhangsan){ console.log(zhangsan.hasOwnProperty(p),`${p}:${zhangsan[p]}`) } 参考代码 codepen关于js...对象自身可枚举,不含 Symbol 属性 Object.getOwnPropertyNames(obj) 返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名 对象自身...对象自身,全部属性 属性中的this是什么 来源 指向 对象 对象自身 构造函数 返回新对象 原型 原型 纯函数调用 外部环境全局,浏览器或者node 访问器get,set使用 一般我们也用不到这个

15.6K10
领券