onmousemove、onmouseout事件
首先我们看文章之前,得把onmousemove和onmouseout搞明白到底是个什么东西来的,先看理论:
onmousemove:事件会在鼠标指针移动到指定的对象上时发生。
onmouseout:事件会在鼠标指针移出指定的对象时发生。
简单点来说就是一个是移入进去时触发,一个是移出时触发,也可以叫它们为移入事件和移出事件。
话不多说,先来看一组代码,如下:
可以看出我HTML给了一个div,是一个正方形,里面带了点文本内容,下面的script标签内容我是用JavaScript写的。外面我用了window.οnlοad=function(){}这个事件,主要是可以起到页面加载的效果,可以有效的防止页面没有加载过来,但是如果你嫌麻烦也可以不用,一样不阻碍里面的内容效果,在这里我还是推荐你使用,毕竟利大于弊。
接下来就是把上面的div标签的id获取到,并且用var声明赋值,当然你上面也可以不用id,用类,那下面就不能通过getEemenById来获取了。这里把它获取好了,最好就控制台console.log输出一下看一下是否获取成功,这样可以保险一点。在下就是加入onmousemove这个方法了,然后我在控制台输出了点文本,看一下效果如何:
移入前:
移入后:
看输出了19个文本,这是我把鼠标移进去输出的,那么为什么会输出19个呢,因为我是移进去的,在鼠标进入这正方形里就开始计算了,所以很难得到1这种数字的,可能还有一种方法,从上方空降下去,可能有机会实现,但我也没有试过,不知道有没有效果。
接下来就是onmouseout这个方法了,这个方法和上面的都差不多,和onmousemove替换一下位置就行了,就不多说了,看效果。
进入前:
进入后:
注意:这里每从里面移出一次就输出一下,这里输出了8次是因为我从里面移出了8次。
onmousemove、onmouseout事件相关推荐
- onmousemove和onmouseout事件的调用,和js使用双引号、单引号的时候应该注意的问题...
使用js的时候,统一使用双引号,然后通过反斜杠进行转义 ①如果同时使用单引号.和双引号的情况下容易出现问题,导致标签中表示的事件不能调用, ②导致由于标签没有封口而出现样式布局错误 1 <!DO ...
- JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup详解 1.事件属性如下: 2.下面用一段代码来了解和体验这些鼠标事件的用法: & ...
- react+windicss+next+hooks中处理onMouseOut事件多次触发的解决方案
前言 在react语法中使用onMouseOut鼠标移除,如果使用这个方法的标签中还有子组件的话,就会被执行多次,只是记录我自己的方法(也不算方法) 问题描述: 公司要求在网站的菜单栏的菜单加上hov ...
- onmouseout事件与onchange事件分析
今天修改Bug,新到期时间为:原到期时间+续卡时间 而不是 当前日期+续卡时间.在修改的过程中发现一个Bug.那就是续卡时间数值框我输入新数值A之后,点击窗体空白处,新到期时间并没有修改过来, 再次点 ...
- 鼠标移出DIV层时,触发onMouseOut事件
话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点. 为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout ...
- html 拼接onmouseout,HTML onmouseout事件用法及代码示例
将鼠标指针移出元素或其子元素时,将发生HTML DOM onmouseout事件. 用法: 在HTML中: 在JavaScript中: object.onmouseout = function(){m ...
- 前端---js中onmouseover和onmouseout事件
在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了javascript中的onmouseover和onmo ...
- 深度理解onmouseover事件和onmouseout事件
今天简单的讲解下onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的 ...
- onmouseover和onmouseout事件小结
前言 onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中时触发的事件,而onmouseout是移出dom元 ...
最新文章
- 效率达CPU一万倍的神经形态芯片发布后,英特尔引发了多方吐槽
- 【网址收藏】Percona-xtraDB-cluster的安装、配置和使用 PXC
- [51nod1847][算法马拉松23(飞越愚人节)F]奇怪的数学题
- 手把手教学,平衡小车详细教程,平衡车
- ExtJS-3.4.0系列目录
- C语言求x个电阻并联的和的程序,C语言 计算并联电阻的阻值
- 常用颜色透明度色值表
- 22. 关于定时任务指定的时间间隔内没有完成任务的处理
- 如何降低计算机版本,电脑系统WIN10如何降级,还原老系统_win10专业版教程
- 乐视2 usb计算机连接,乐视 LetvX620 开启USB调试模式
- 10余智慧项目建设初见成效 南岸用智慧城市开启智慧生活
- NLP笔记:常用激活函数考察整理
- 吴恩达深度学习第一课第三周编程作业(上)
- nrf52840开发笔记(一)------开发环境搭建
- lower_bound 与 upper_bound
- androidQ系统新特性
- php的和谐脏话,大司马仅有的两次说脏话,听完网友笑出声,直播效果一片和谐!...
- 蚂蚁爬绳java_腾讯面试题——蚂蚁爬行(Java版)
- 2020年全球滤波器行业现状及竞争格局分析,市场高度集中「图」
- SpringBoot从入门到放弃之日志配置
热门文章
- IPO被否,灿星文化还能保住“综艺王座”吗?
- linux进程调度HMP,hmp
- 短信验证码存在的威胁
- Linux-更改系统主机名(hostname)的方法
- linux 内核 xfs ail,linux 3.10内核 xfs的一次io异常导致的hung crash
- weblogic修改banner_WEBLogic默认账号弱口令及利用方法.doc
- Aspen HYSYS实例教程
- TSDB 存储引擎介绍
- Seq2Seq in Tensorflow
- Altaba宣布5月20日开始出售阿里巴巴股份 可能全部出售