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

这篇具有很好参考价值的文章主要介绍了鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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('看看触发了多少次')
}

同元素绑定效果截图

onmousemove鼠标事件,javascript,html,前端

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

onmousemove鼠标事件,javascript,html,前端

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

效果图

onmousemove鼠标事件,javascript,html,前端

 文章来源地址https://www.toymoban.com/news/detail-555987.html

<!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>

到了这里,关于鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt 鼠标按下移动释放事件

    QEvent::MouseButtonPress ​ 鼠标按下时,触发该事件,它对应的子类是 QMouseEvent QEvent::MouseMove ​ 鼠标移动时,触发该事件,它对应的子类是 QMouseEvent QEvent::MouseButtonRelease ​ 鼠标释放时,触发该事件,它对应的子类是 QMouseEvent 自定义一个标签控件 LabelX ,让它继承自 QLabel ,然后

    2024年01月22日
    浏览(107)
  • TextBox添加鼠标按下、失去焦点、鼠标移动等事件及重写

    TextBox添加鼠标按下、失去焦点、鼠标移动等事件及重写 方法1: 方法2:    

    2024年02月15日
    浏览(40)
  • QGraphicsView中重写鼠标事件实现图片的移动

            本文讲的是如何在PyQt5的组件QGraphicsView中重写鼠标事件实现图片的移动。         PyQt5作为强大的GUI编程工具,免不了会拿来做一些图片的显示和处理问题,有的会使用QPainter作为动态显示图片的工具,QLabel是显示静态图片的主推。但是我在工作中遇到了超大

    2023年04月14日
    浏览(46)
  • C#开发winform&wpf后台捕获鼠标移动事件

    做 WPF和winform的时候,可以在界面上设置鼠标移动事件来检测鼠标移动,如果项目为后期改造这样做的话改动量很大,今天通过另外一种后台调用windows api的方式进行快速捕获和触发,提高开发效率分享给大家。

    2024年02月16日
    浏览(50)
  • Qt获取鼠标移动事件,窗口内任意位置按下鼠标左键拖动窗口

    重写窗口的两个事件函数mousePressEvent和mouseMoveEvent即可: 在mousePressEvent 中,按下鼠标左键时,记录窗口坐标,其中窗口坐标的计算是由鼠标事件获取到鼠标在整个屏幕中的坐标(ev-globalpos()),然后再使用pos()获取到鼠标在窗口内的相对位置,两者之差就是窗口在整个屏幕上

    2024年02月12日
    浏览(60)
  • VBA高级应用30例应用2:MouseMove鼠标左键按下并移动鼠标事件

    《VBA高级应用30例》(版权10178985),是我推出的第十套教程,教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开,这套教程案例与理论结合,紧贴“实战”,并做“战术总结”,以便大家能很好的应用。教程的目的是要求大家 在实际工作中分发VBA程序,写好的

    2024年04月27日
    浏览(41)
  • 【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.4 鼠标按下、移动、释放事件

    本章要实现的整体效果如下: QEvent::MouseButtonPress ​ 鼠标按下时,触发该事件,它对应的子类是 QMouseEvent QEvent::MouseMove ​ 鼠标移动时,触发该事件,它对应的子类是 QMouseEvent QEvent::MouseButtonRelease ​ 鼠标释放时,触发该事件,它对应的子类是 QMouseEvent 本节通过两个案例来讲

    2024年02月08日
    浏览(49)
  • Qt窗口设置无边框不能移动,鼠标穿透后不能响应点击事件

      最近在做一个迷你小工具,准备干点不可描述的事情,想要短小强悍,始终在最顶层显示,同时不要自带的关闭按钮和边框,百度一下,发现是需要设置如下两个属性:   那么问题来了,这样的话一运行窗体就在正中间,而且无法拖动,就像这样   哪怕对于我这种

    2024年02月10日
    浏览(61)
  • 【Qt图形视图框架】自定义QGraphicsItem和QGraphicsView,实现鼠标(移动、缩放)及键盘事件、右键事件

    说明 在使用Qt的图形视图框架实现功能时,一般会在其基础上进行自定义功能实现。 如:滚轮对场景的缩放,鼠标拖动场景中的项,以及可以在场景中进行右键操作等。 示例 myitem 为自定义QGraphicsItem,实现了边框、重绘事件、鼠标悬停、按键、右键菜单等功能。 myitem.h myi

    2024年02月04日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包