js原生，鼠标离开事件

最新推荐文章于 2024-09-12 16:31:59 发布
最新推荐文章于 2024-09-12 16:31:59 发布
阅读量3.2w 收藏 7
点赞数 3
分类专栏： javaScript 文章标签： 原生 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq940853667/article/details/79357635
版权

mouseout: 鼠标离开事件
mouseleave: 鼠标离开事件


区别: 
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

mouseover: 鼠标移入事件
mouseenter: 鼠标移入事件

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave


坑: mouseout: 会造成反复触发事件， 用mouseleave代替即可

garyHoH
关注
专栏目录
JavaScript-鼠标事件（鼠标点击松开移动效果）
weixin_34081595的博客
01-15 4431
鼠标和键盘事件是在页面操作中使用最频繁的操作，可以利用鼠标事件在页面中实现鼠标移动、单击时的特殊效果，也可以利用键盘来制作页面的快捷键等。 鼠标的单击事件 单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时释放鼠标键的这一完整过程。 单击事件一般应用于 Button 对象、Checkbox 对象、I...
js 文本 控件添加鼠标离开事件
yylyell的专栏
09-26 1320
例如：给控件鼠标离开后，如果控件值不存在action字符串，则自动添加action字符串 document.getElementById("控件ID").bind("blur",function(){     var value =document.getElementById("控件ID").val();      if(value!=null&&value!=""){     if(v
JS代码实现：鼠标悬停与离开（两种方式）
热门推荐
kuaixiao0217的博客
04-21 1万+
用JS代码实现两种方式的鼠标悬停与离开
JS 事件类型之鼠标事件
qq_45560350的博客
08-28 1395
鼠标事件 1 . click 鼠标左键点击 = mousedown + mouseup 2 . mousedown 鼠标左/右键摁下 3 . mouseup 鼠标左/右键松开 document.onmousedown = function(e){ console.log('mousedown') } document.onclick = function(e){ console.log('click') } document.onmouseup = function(){ console.log
一、（JS）JS中鼠标事件-mouseenter、mouseleave和mouseover、mouseout区别
最新发布
Sean_0819的博客
09-12 1545
onmouseenter、onmouseleave和onmouseenter、onmouseleave
js关于鼠标离开事件
u010227042的博客
03-15 1万+
mouseout: 鼠标离开事件 mouseleave: 鼠标离开事件 区别: 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 mouseover: 鼠标移入事件 mouseenter: 鼠标移入事件 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave 坑: mouseout:
Javascript：鼠标经过、鼠标离开事件
听海边涛声
06-20 332
Javascript：鼠标经过、鼠标离开事件
JS怎么判断鼠标进入离开的方向?
weixin_44519496的博客
09-02 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #b
事件触发列表与解说
午夜飞行
12-02 1750
一般事件事件浏览器支持描述onClickHTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClickHTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件onMouseDownHTM
JavaScript处理鼠标各个事件的示例代码、说明和案例
qq_43326668的博客
05-25 4160
以上示例代码演示了如何在HTML中使用JavaScript处理常见的鼠标事件，并给出了每个事件的使用方法、作用和常见使用案例。常见使用案例：在网页中的拖拽功能或按住按钮进行连续操作时，通过监听鼠标松开事件来触发相应的逻辑处理。常见使用案例：在网页中的图片上，当用户将鼠标移出图片区域时，恢复图片的原始样式或显示其他相关信息。常见使用案例：在网页中创建一个按钮，当用户点击按钮时触发相应的操作，例如提交表单、打开弹窗等。常见使用案例：在网页中的游戏或交互界面中，当用户按下特定按钮时触发相应的游戏操作或界面切换。
JavaScript鼠标悬停事件用法解析
10-15
在示例中，`onmouseleave`同样被绑定到div元素，当鼠标离开div时，调用`leave`函数。`leave`函数同样接收`this`作为参数，用于改变div的背景颜色回原来的红色，这样当鼠标移出div时，用户可以看到元素状态的变化。 ...
原生js鼠标滑过文字淡入淡出效果
11-17
在JavaScript（js）中实现鼠标滑过文字的淡入淡出效果是一项常见的动态网页交互功能。这个效果可以增强用户界面的吸引力，使文本更具视觉吸引力。以下是对这一知识点的详细说明： 1. **HTML基础**：首先，我们需要...
原生js鼠标永远点不到按钮特效代码
03-20
这个“原生js鼠标永远点不到按钮特效代码”就是一个这样的例子，它利用了JavaScript事件处理和CSS动画来实现这一效果。下面将详细介绍这个特效的工作原理和实现方法。 首先，我们要理解的是，JavaScript中的事件...
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
10-22
下面将详细介绍如何通过原生JavaScript和jQuery两种方式来实现这个功能。 ### 使用原生JavaScript实现文本框内容的清除和恢复 #### 关键点： 1. **使用`window.onload`确保页面加载完成后执行脚本。** 2. **为...
原生js获取鼠标事件发生时，鼠标所在位置的各种坐标
Bohn的博客
07-13 4778
<html> <head> <meta charset="UTF-8"> </head> <!--//获取鼠标点击事件发生时的鼠标指针相对于浏览器窗口的坐标--> <!--<body onmousedown="show_coords(event)">--> <!--<p>请在文档中点...
焦点离开事件
weixin_30398227的博客
03-26 297
onblur 事件 对象失去焦点时触发。 转载于:https://www.cnblogs.com/2016-cxp/p/8654681.html
JS原生onmouseenter onmouseleave 悬浮事件 一直闪动 问题解决
彼岸舞的博客
08-11 1159
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> let enter; enter = function (event){ $("#itemClose").css("display...
鼠标停留触发事件，离开时也触发
weixin_51357044的博客
08-22 662
很多框架都没有自己想要的菜单效果，最近就自己写一个，我也想要有鼠标停留到一级菜单时候无需要点击就会显示二级菜单，离开时自动关闭。
HTML离开前事件和离开后事件
ppwwp的专栏
03-16 728
&amp;lt;script language=javascript&amp;gt; function stoprefresh() { return &quot;\n警告！~ \n数据查询中，确定继续？\n&quot;; } function UnloadConfirm() { alert('离开页面'); } &amp;lt;/script&amp;gt; &amp;lt;body&amp;gt;
原生js触摸事件使用
07-28
在原生 JavaScript 中，你可以使用触摸事件来处理移动设备上的触摸交互。下面是一些常用的触摸事件和它们的使用方法： 1. touchstart：当手指触摸屏幕时触发。可以使用 event.touches 来获取所有触摸点的信息。 ```javascript element.addEventListener('touchstart', function(event) { var touches = event.touches; // 处理触摸事件 }); ``` 2. touchmove：当手指在屏幕上滑动时触发。可以使用 event.touches 来获取所有触摸点的信息。 ```javascript element.addEventListener('touchmove', function(event) { var touches = event.touches; // 处理触摸事件 }); ``` 3. touchend：当手指离开屏幕时触发。可以使用 event.changedTouches 来获取所有离开屏幕的触摸点的信息。 ```javascript element.addEventListener('touchend', function(event) { var touches = event.changedTouches; // 处理触摸事件 }); ``` 除了上述事件，还有一些其他的触摸事件，如 touchcancel（当触摸被取消，例如由于系统事件中断）等。你可以根据需要选择合适的事件来处理触摸交互。 在处理触摸事件时，你可以使用 event 对象的属性来获取触摸点的坐标等信息。例如，event.touches[i].clientX 表示第 i 个触摸点相对于可视窗口的水平坐标。 注意：触摸事件在移动设备上使用，而鼠标事件在桌面设备上使用。为了兼容不同设备，你可以同时监听触摸事件和鼠标事件，并在事件处理程序中进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值