鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点

旧友前度丶

已于 2022-11-04 15:52:02 修改

阅读量1.6k

点赞数 2

文章标签： javascript html 前端

于 2022-10-26 11:39:18 首次发布

本文链接：https://blog.csdn.net/wangyangzxc123/article/details/127529082

版权

1.onmouseover

指的是鼠标在进入某个元素的时候触发的事件

2.onmouseout

指的是鼠标在离开某个元素时触发的事件

其他

onclick-------------------------------------鼠标单击触发

ondblclick----------------------------------鼠标双击触发

onmousemove---------------鼠标在上面移动时触发

具体例子: 下面是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #root {
            width: 1200px;
            height: 900px;
            margin: 40px auto;
            background-color: black;
            position: relative;
        }
        #box1 {
            position: absolute;
            left: 150px;
            top: 150px;
            width: 400px;
            height: 400px;
            background-color: #fff;
            position: relative;
        }
        #box2 {
            position: absolute;
            right: 150px;
            top: 150px;
            width: 400px;
            height: 400px;
            background-color: #fff;
            overflow: hidden;
        }
        #boxx1 {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 200px;
            height: 200px;
            background-color: black;
        }
        #boxx2 {
            width: 800px;
            height: 800px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="root">
        <div id="box1">
            <!-- <div id="boxx1"></div> -->
        </div>
        <div id="box2">
            <div id="boxx2">
            </div>
        </div>
    </div>
</body>
</html>
<script>
    let box1 = document.getElementById('box1')
    let merDiv = document.createElement('div') // 创建一个div盒子
    merDiv.id = 'boxx1' // 盒子的ID和自己设定的样式ID一样
    let flag = true
    box1.onmouseover = function (e) { // 移入
        box1.appendChild(merDiv) // 移动鼠标进入盒子时添加盒子
    }
    box1.onmousemove = function(e) { // 移动
        let left = e.x - box1.getClientRects()[0].left - boxx1.clientWidth / 2 // getClientRects 用于计算当前可是距离边框的长度
        let top = e.y - box1.getClientRects()[0].top - boxx1.clientHeight / 2
        if (left < 0) {
            left = 0
        }
        if (left > 200) {
            left = 200
        }
        if (top < 0) {
            top = 0
        }
        if (top > 200) {
            top = 200
        }
        merDiv.style.left = left + 'px'
        merDiv.style.top = top + 'px'
    }
    merDiv.onmouseout = function(e) { // 移出
        box1.removeChild(merDiv) // 移出时删除盒子
    }
</script>

核心点以及坑点.onmouseover, onmouseout 如果绑定在同一个盒子上, 会出现闪烁同时触发的情况. 我一开始使用了定时, 效果不是很好.但是没有解决根本问题.后来仔细查寻资料以及百度科普相关的知识点发现了原因

由于我的代码写的是鼠标跟随移动框, 例子是网上的放大镜案例, 然后我一开是将移动事情和移出事件onmouseover, onmouseout 都绑定在了我所要经过的元素上, 理论是上这样没错.但是onmouseout的核心点在离开了元素就会触发, 根据上述代码鼠标移动进入元素会添加创建一个div 盒子会跟随鼠标移动, 此时之前绑定的移出事件就会触发, 原因就是新生成的盒子遮挡了事件绑定的元素,最后导致屏幕闪烁, 因为被遮挡, 代码判断鼠标离开了原绑定元素,所以会出现无休止循环触发移入和移出事件

box1.onmouseout = function(e) { // 移出
  box1.removeChild(merDiv) // 移出时删除盒子
  console.log('看看触发了多少次')
}

同元素绑定效果截图

merDiv.onmouseout = function(e) { // 移出
    box1.removeChild(merDiv) // 移出时删除盒子
    console.log('看看触发了多少次')
}

根据鼠标事件模拟放大镜效果:

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #root {
            width: 1200px;
            height: 900px;
            margin: 40px auto;
            background-color: black;
            position: relative;
        }
        #box1 {
            position: absolute;
            float: left;
            width: 400px;
            height: 400px;
            margin: 300px 10px 0 200px; 
            background-color: #fff;
            position: relative;
        }
        #box2 {
            float: left;
            width: 400px;
            height: 400px;
            margin: 300px 10px;
            background-color: #fff;
            overflow: hidden;
            position: relative;
            visibility: hidden;
        }
        #boxx1 {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 200px;
            height: 200px;
            background-color: black;
        }
        #boxx2 {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 600px;
            height: 600px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="root">
        <div id="box1">
            <!-- <div id="boxx1"></div> -->
        </div>
        <div id="box2">
            <div id="boxx2">
                <img src="./1.png" alt="">
            </div>
        </div>
    </div>
</body>
</html>
<script>
    let box1 = document.getElementById('box1')
    let merDiv = document.createElement('div') // 创建一个div盒子
    merDiv.id = 'boxx1' // 盒子的ID和自己设定的样式ID一样
    let box2 = document.getElementById('box2')
    let boxx2 = document.getElementById('boxx2')
    box1.onmouseover = function (e) { // 移入
        box1.appendChild(merDiv) // 移动鼠标进入盒子时添加盒子
        box2.style.visibility = 'visible'
    }
    box1.onmousemove = function(e) { // 移动
        let left = e.x - box1.getClientRects()[0].left - boxx1.clientWidth / 2 // getClientRects 用于计算当前可是距离边框的长度
        let top = e.y - box1.getClientRects()[0].top - boxx1.clientHeight / 2
        if (left < 0) {
            left = 0
        }
        if (left > 200) {
            left = 200
        }
        if (top < 0) {
            top = 0
        }
        if (top > 200) {
            top = 200
        }
        merDiv.style.left = left + 'px'
        merDiv.style.top = top + 'px'
        boxx2.style.left = left * -(boxx2.clientWidth / boxx1.clientWidth) + 'px'
        boxx2.style.top = top * -(boxx2.clientHeight / boxx1.clientHeight) + 'px'
    }
    merDiv.onmouseout = function(e) { // 移出
        box1.removeChild(merDiv) // 移出时删除盒子
        box2.style.visibility = 'hidden'
    }
</script>