offsetX/Y screenX/Y clientX/Y之间的区别？onmouseenter 和 onmousemove之间的区别？如何理清编写绑定事件时的思路?

最新推荐文章于 2024-06-27 07:56:26 发布

wanwan 别慌

最新推荐文章于 2024-06-27 07:56:26 发布

阅读量959

点赞数 14

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_74892004/article/details/135851848

版权

今天用鼠标事件实现一些操作时，发现没有什么头绪。我自己总结原因是有以下几点。

event对象中offsetX/Y screenX/Y clientX/Y 这些鼠标位置没理明白
不能合理使用鼠标点击事件
思路不清晰

对于上述问题，我又抛出了以下几个问题

offsetX/Y screenX/Y clientX/Y是什么？
鼠标点击事件有哪些？
在写关于绑定事件的需要时如何理清楚思路？

解决

1.在搞清楚offsetX/Y screenX/Y clientX/Y是什么前，需要知道一个知识点事件对象（event）。

事件对象event: 是事件函数的一个参数包含了事件的所有信息

如下代码中的参数ev，就是事件对象

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #box{
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
  
    <div id="box"></div>
    <script>
        box.onclick=function(ev){
            console.log(ev);
            console.log(ev.pageX);
            console.log(ev.offsetX);
            console.log(ev.clientX);
            console.log(ev.screenX);



        }

输出ev后，发现返回值是一个对象，里面包含很多属性，如下图，可以发现offsetX等都在这个对象中

1.那么offsetX/Y screenX/Y clientX/Y之间到底有什么区别呢？

字面解释如下

client 和 clientY 相对于浏览器可视窗口左上角原点(不包含滚动条)

screenX 和screenY 相对于电脑屏幕的左上角

pageX 和 pageY 相对于页面文档流左上角原点(包含滚动跳)

offsetX 和 offsetY 相对于触发事件的元素（元素）

我从这上面不是很理解，然后去看了别人的贴子，总结如下（图），如果有错请指出

一定要记住我们使用这些属性，目的就是确定鼠标的位置（确定我们鼠标到参考点的位置），而这几个属性之间最大的区别就是参考点不同

1）client 和 clientY

2）screenX 和screenY

一开始我没理解，但是把鼠标点击的位置，靠近参考点后，醍醐灌顶了，如下图

3） pageX 和 pageY

与client 和 clientY类似

4）offsetX 和 offsetY

2.常用的鼠标点击事件

（点击事件）带星号是常用的

onclick 鼠标左击事件⭐

ondblclick 鼠标双击事件

oncontextmenu 鼠标右击事件

（离开事件）

onmouseout 经过子节点触发

onmouseleave 鼠标离开

(进入事件)

onmouseover 鼠标移入，经过子节点触发⭐

onmouseenter 鼠标进入⭐

onmousemove 鼠标移动⭐

(按下弹起事件)

onmousedown 鼠标按下⭐

onmouseup 鼠标弹起，只要按下不松手就永远不会触发⭐

1）一定要区分 onmouseenter 和 onmousemove

参考如下代码

<body>
    <!-- 区别
    over经过子节点触发
    enter经过子节点不触发，谁设置了谁触发
    -->
    <div id="d1">
        <span id="s1">移入over</span>
    </div>
    <div id="d2">
        <span id="s2">进入enter</span>
    </div>
    <script>
        let i=0
        d1.onmouseover=function(){
            s1.innerHTML=i++

        }
        d2.onmouseenter=function(){
            s2.innerHTML=i++
            
        }
    </script>
    
</body>

代码运行结果如下图

3.在写关于绑定事件的需要时如何理清楚思路？

牢记绑定三要素，我觉得对我很有帮助

3.1 绑定三要素

事件源：和谁做好约定

事件类型：约定一个什么行为

事件处理函数：当用户触发该行为的时候，执行的函数

3.2 利用绑定三要理清思路

如下题目，思路如下

鼠标拖拽，图片跟随

（设置一个开关，判断是否移动）

1.鼠标按下

确定事件源（图片）

确定事件类型（onmousedown）

事件处理函数（鼠标按下，获取鼠标到元素的位置)

2.鼠标移动

确定事件源（文档）

确定事件类型（onmouseover）

事件处理函数（鼠标移动，获取鼠标位置。确定图片的位置，图片的位置=当前鼠标的位置-鼠标到元素的位置。设置可移动的范围)

3.鼠标弹起

确定事件源（图片）

确定事件类型（onmouseup）

事件处理函数（鼠标弹起，不移动)

实现代码如下：

<style>
        div {
            width: 200px;
            height: 200px;
            position: fixed;
            background-image: url(../../demo09-01.23/img/img01.jpg);
            background-size: 100%;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        //定义变量，保存原始状态
        let flag = false
        //当点击图片，打开开关;显示鼠标位置，为了每次移动
        let offsetXs = 0
        let offsetYs = 0

        //绑定事件
        box.onmousedown = function (ev) {
            //点击图片，打开开关
            flag = true
            //获取鼠标位置
            offsetXs = ev.offsetX
            offsetYs = ev.offsetY
            console.log(offsetXs, offsetYs);
        }
        //鼠标在文档中移动，只要开关开着，就自动回到鼠标位置
        document.onmousemove = function (e) {
            if (flag) {
                //获取鼠标距离浏览器的位置
                let x = e.clientX
                let y = e.clientY
                //获取图片左上角的位置
                let left = x - offsetXs
                let top = y - offsetYs

                //规定图片移动的范围
                if (left < 0) {
                    left = 0
                    //innerWidth 可视窗口的宽度
                } else if (left > innerWidth - 200) {
                    left = innerWidth - 200
                }

                if (top < 0) {
                    top = 0
                } else if (top > innerHeight - 200) {
                    top = innerHeight - 200
                }
                //将设置好的范围给box
                //cssText 设置css的样式
                box.style.cssText = `left:${left}px;top:${top}px`

            }

        }
        //当鼠标弹起 ，开关关闭
        box.onmouseup = function () {
            flag = false
        }

    </script>

wanwan 别慌

关注

14
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
offsetX/Y screenX/Y clientX/Y之间的区别？onmouseenter 和 onmousemove之间的区别？如何理清编写绑定事件时的思路?

event对象中offsetX/Y screenX/Y clientX/Y 这些鼠标位置没理明白不能合理使用鼠标点击事件思路不清晰。
复制链接

扫一扫