DOM 鼠标事件

最新推荐文章于 2023-07-25 09:58:47 发布
最新推荐文章于 2023-07-25 09:58:47 发布
阅读量180 收藏 2
点赞数 1
文章标签： DOM事件 鼠标事件 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39844423/article/details/102637155
版权
DOM 鼠标事件树状图：

在这里插入图片描述

实例演示：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM 鼠标事件</title>
    <style>
    section{
        display: flex;
        flex-flow: row wrap;
        /* justify-content: space-between; */
    }
    .divGroup{
        width: 200px;
        height: 200px;
        margin: 30px;
        background-color: #FFEBCA;
        text-align: center;
        border: 2px solid #000;
    }
    </style>
</head>
<body>
    <!-- <h4>onclick 和 onmouseup 一起使用时，鼠标‘左键’点击后，onmouseup执行完后立马执行onclick，但是使用鼠标‘滚轮’单击后，onmouseup会触发，onclick不会触发</h4>
    <h4>onmousedown 、 onmouseenter 、onmouseout、 onmouseleave都是进入或离开时才触发，而onmousemovr是在对象内移动就触发</h4>
    <h4>onmousedown 、 onmouseenter的区别：  onmouseenter不支持冒泡，即在自身区域内进入子元素时不会触发，而onmousedown会触发</h4> -->

    <section id="section">
        <div class="divGroup" > <p style="color: #4AF2A1;">按下绿</p>
                                <p style="color: #5CC9F5;">单击蓝(滚轮单击无效)</p>
                                <p style="color: #F9BA48;">抬起黄</p>
                                <p style="color: #6638F0;">双击紫</p></div>
        <div class="divGroup" > <p style="color: #F9BA48;">进入绿 onmouseover</p>
                                <p style="color: #6638F0;">离开蓝 onmouseout</p></div>
        <div class="divGroup" > <p style="color: #4AF2A1;">进入黄 onmouseenter</p>
                                <p style="color: #5CC9F5;">离开紫 onmouseleave</p></div>
        <div class="divGroup">右键变灰<br>禁止弹出菜单</div>
        <div class="divGroup">滚动变绿</div>
        <div class="divGroup">拖拽</div>
    </section>
</body>
<script>
    var divGroups = document.getElementsByClassName('divGroup');
    var section = document.getElementById('section');
    var count = 0;
    // 鼠标按下
    divGroups[0].onmousedown = function(){
        this.style.backgroundColor = "#4AF2A1"
    }
    // 鼠标单击
    divGroups[0].onclick = function(){
        this.style.backgroundColor = "#5CC9F5"
        console.log("onclick: " + count++)              // 测试 onclick 与 onmouseup 事件先后
    }
    // 鼠标抬起
    divGroups[0].onmouseup = function(){
        this.style.backgroundColor = "#F9BA48"
        console.log("onmouseup: " + count++)            // 测试 onclick 与 onmouseup 事件先后
    }
    // 鼠标双击
    divGroups[0].ondblclick = function(){
        this.style.backgroundColor = "#6638F0"
    }
    // 鼠标进入
    divGroups[1].onmouseover = function(){
        this.style.backgroundColor = "#4AF2A1"
    }
     // 鼠标离开
     divGroups[1].onmouseout = function(){
        this.style.backgroundColor = "#5CC9F5"
    }
    // 鼠标抬起
    divGroups[2].onmouseenter = function(){
        this.style.backgroundColor = "#F9BA48"
    }
    // 鼠标离开
    divGroups[2].onmouseleave = function(){
        this.style.backgroundColor = "#6638F0"
    }
    // 鼠标右键
    divGroups[3].oncontextmenu = function(event){
        this.style.backgroundColor = "#9DA5AD" 
        event.preventDefault();
    }
    // 鼠标滚动
    divGroups[4].onwheel = function(){
        this.style.backgroundColor = "#70F735" 
    }
    // divGroups[4].addEventListener('wheel',function(){       // IE 9+支持滚动事件， 且IE在 DOM 对象中没有 onwheel 属性， 需要使用监听 ‘wheel’   IE8+ 支持监听
    //     this.style.backgroundColor = "#70F735" 
    // })
    // 鼠标拖拽
    drag(divGroups[5]);
    function drag(Obj){
        Obj.style.top = Obj.offsetTop + 'px';
        Obj.style.left = Obj.offsetLeft + 'px';
        Obj.style.position = "absolute";                                  // 还原原始位置，脱离文档流  absolute 、fixed   
        Obj.style.margin = "0";  
        Obj.onmousedown = function(event){ 
            originalTop = event.clientY - this.offsetTop;                        // 获取鼠标按下时，相对于盒子内部的Top 
            originalLeft = event.clientX - this.offsetLeft;                      // 获取鼠标按下时，相对于盒子内部的Left
            // 使用document，而不用Obj，避免了鼠标快速滑动脱离对象问题
            document.onmousemove = function(event){         
                Obj.style.top = event.clientY - originalTop + 'px';       // 获取鼠标移动结束的位置，并还原相对盒子的位置
                Obj.style.left = event.clientX - originalLeft + 'px';     // 获取鼠标移动结束的位置，并还原相对盒子的位置
            }
            document.onmouseup = function(){       // 鼠标抬起时，停止拖拽     
                document.onmousemove = null;
            }
        }
    }
    // // 测试 onmouseover 和 onmouseenter 的区别
    // var count_over = 0;
    // var count_enter = 0;
    // section.onmouseover = function(){
    //     console.log("count_over: " + count_over++)
    // }
    // section.onmouseenter = function(){
    //     console.log("count_enter: " + count_enter++)
    // }
</script>
</html>

注意事项：

1、onclick 和 onmouseup 一起使用时，鼠标‘左键 ’点击后，onmouseup执行完后立马执行onclick，但是使用鼠标‘滚轮’单击后，onmouseup会触发，onclick不会触发
2、onmousedown 、 onmouseenter 、onmouseout、 onmouseleave都是进入或离开时才触发，而onmousemovr是在对象内移动就触发
3、onmousedown 、 onmouseenter的区别： onmouseenter不支持冒泡，即在自身区域内进入子元素时不会触发，而onmousedown会触发

山有魂兮
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM 事件（鼠标事件）
lord_of_war的博客
09-06 1216
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行。 鼠标事件 onclick 事件 onclick 事件会在元素被点击时发生。 <p>单击按钮触发函数。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> function myFunction(){ documen
DOM基础教程之事件类型
01-19
1.鼠标事件： 鼠标的事件都频繁使用，下面例子就测试各种鼠标事件 代码如下: [removed]  function handle(oEvent) {  var disp = document.getElementById(“display”);  if (window.event) oEvent = window....
DOM事件 - 鼠标事件
m0_71710871的博客
06-12 527
JavaScript DOM 事件 - 鼠标事件中的部分事件说明
DOM鼠标事件
weixin_66171880的博客
01-28 1847
1. 鼠标事件：用户操作鼠标在元素节点对象上做出的某些行为 当浏览器监听到事件行为时，会自动调用对应的事件处理函数 写法： 元素节点对象.事件名称 = 函数 2.给元素节点对象添加一个点击事件方法： 对象.onclick = function(){ 事件的处理函数/事件的处理程序 / 事件函数}； (快速)双击事件：ondblclick 3.鼠标移入事件： onmouseover、 onmouseenter 鼠标移出事件：onmouseleave、...
DOM - 鼠标事件
最新发布
qq_53109172的博客
07-25 255
这次的触发就可以很清晰的看见了，虽然进入 btn 区域时，也触发了离开的时候，但是没有像禁止冒泡前面的时候不仅触发离开还触发进入的事件，只是因为从 box 移入到了 btn ，且 btn 属于上层元素，所以是真的离开了 box 的区域，是一种正常的事件触发。所有的鼠标事件，事件处理程序中的事件对象，都为 MouseEvent，MouseEvent 是一个构造函数。这两个属性是相对于鼠标上一次移动位置，一个移动事件的触发时持续的，所以这两个属性的值，是。这两个属性等效于 clientX 和 clientY。
DOM——常见的鼠标事件
weixin_45328723的博客
07-19 319
DOM事件
关于js中的鼠标事件总结
12-12
js中鼠标事件主要有onclick，onmousedown，onmouseup，oncontextmenu，ondblclick,所有的这些事件都包含有一个事件对象event，当然在IE低版本下，event对象是挂在window底下的。这个我们另行讨论。 1.通过html添加...
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
10-20
主要介绍了Javascript DOM事件操作,结合实例形式总结分析了javascript监听鼠标点击、释放，悬停、离开等操作技巧,需要的朋友可以参考下
DOM鼠标拖动
01-20
DOM元素的鼠标拖动效果，可以下载试一下
DOM事件之简约下拉菜单
02-18
通过设置鼠标事件和键盘事件，实现下拉菜单的效果变换，界面简约，代码实用易学。
DOM初探（29）——鼠标事件
热门推荐
abraham的博客
03-23 1万+
视频：https://ke.qq.com/course/231577?taid=3983676656552089 事件分类： 鼠标事件 click,mousedown,mousemove,mouseup,contextmenu,mouseover,mouseout, mouseenter,mouseleave 用button来区分鼠标的按键，0/1/2 DOM3标准规定：click事件只...
DOM ------ 常见鼠标事件
HuoZhiyan 的博客
02-10 429
禁用右键菜单 & 禁止选中文字 1.contextmenu 禁用右键菜单 2.selectstart 禁止选中文字 这是一段不能复制的文字,且禁用了右键菜单 //js代码 // 1. contextmenu 禁用右键菜单 document.addEventListener('contextmenu', function(e){ e.preventDefault() }) // 2. selectstart 禁止选中文
HTML中的DOM事件——鼠标事件、键盘事件、框架对象事件、表单事件
weixin_44867717的博客
07-06 4765
dom元素
DOM事件基础(鼠标)
weixin_54418006的博客
12-12 624
1. 事件三要素 <body> <button id="btn">FG</button> <script> // 点击一个按钮，弹出对话框 // 事件是由三部分组成：事件源、事件类型、事件处理程序 // 1. 事件源 事件被触发的对象 var btn = document.getElementById('btn'); // 2. 事件类型 如何触发 什么事件 比如鼠
js DOM : 鼠标事件
sleepy_girl的博客
07-28 1762
任何事件都有有一个事件对象，该对象作为事件函数的第一个参数 鼠标进入事件：onmouseover 、onmouseenter 鼠标移出事件 ：onmouseout 、onmouseleave 鼠标移动事件 ：onmousemove 事件绑定 var layer = document.getElementById('layer'); // 鼠标坐标是相对于layer元素的 //...
2、DOM事件
hzg_hou的博客
05-12 86
onmouseleave | 鼠标离开 | DOM对象.onmouseleave = function() {} || onmousewheel | 鼠标滚轮 | DOM对象.onmousewheel = function() {} || onmousemove | 鼠标移动 | DOM对象.onmousemove = function() {} || onmouseout | 鼠标移除 | DOM对象.onmouseout = function(){} |//a) 先判断当前函数有几个参数?
DOM、鼠标、表单、多媒体事件
bang3的博客
11-18 269
DOM document.getElementById(): id document.getElementsByName():通过name属性（可重复），返回一个集合 documen.getElementsByClassName(): calss属性，返回一个集合 documen.getElementsByTagName(): 标签名，返回一个集合 新增：var mydiv=documen
常用鼠标事件 鼠标事件对象 +dom
weixin_70144681的博客
06-08 93
常用鼠标事件 鼠标事件对象dom
DOM常用鼠标事件
zheng_14451的博客
09-14 116
常用的鼠标事件
c# WebBrowser 的鼠标事件
05-27
需要注意的是，如果在 WebBrowser 控件中加载了多个框架或窗口，可能需要使用其他方法来获取鼠标事件所发生的框架或窗口的 DOM 对象。此外，如果 Web 页面中禁用了鼠标事件，则无法通过上述方法监听鼠标事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值