Js鼠标点击事件

于 2021-12-28 15:47:41 发布 2870 收藏 2
分类专栏： 文献 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57762664/article/details/122195141
版权

1. 鼠标事件指通过鼠标触发事件, 类似用户的行为:
Onclick：当单击鼠标时运行脚本
Ondblclick：当双击鼠标时运行脚本
Onmousedown:当按下鼠标按钮时运行脚本
onmousemove:当鼠标指针移动时运行脚本
Onmouseout:当鼠标指针移出元素时运行脚本
Onmouseover:当鼠标指针移至元素之上时运行脚本
Onmouseup:当松开鼠标按钮时运行脚本
Onmousewhee;当转动鼠标滚轮时运行脚本
Onscroll:当滚动元素的滚动条时运行脚本

<!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>鼠标事件</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
//鼠标单击事件
// box.onclick = function(){
// alert(123);
// }

//鼠标双击事件
// box.ondblclick = function(){
// alert(123);
// }

//鼠标移至元素之上 事件
// box.onmouseover = function(){
// console.log("鼠标在元素上面")
// }

//鼠标移出元素 事件
// box.onmouseout = function(){
// alert(456);
// }
//鼠标移动时元素事件
// box.onmousemove = function(){
// console.log("鼠标在移动") ;
// }

// box.onmousedown = function(){
// console.log("当前鼠标为按下状态")
// }

// box.onmouseup = function(){
// console.log("当前鼠标为松开状态")
// }

// box.onmousewheel = function(){
// console.log("当前为滚轮状态")
// }

// window.onscroll = function(){
// alert("滚动条事件");
// }
</script>
</body>
</html>

weixin_57762664
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript触发模拟鼠标点击事件
10-16
主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Js之鼠标事件-鼠标事件
cx1361855155的博客
08-04 5702
鼠标点击事件包括 click（点击），dbclick（双击），mousedown（按下）和 mouseup（松开）四个。其中 click 事件比较常用，而mousedown 和 mouseup事件类型多用于鼠标施放，拉伸操作中。如果从父元素中移动到子元素中，也会触发元素的mouseover事件类型。mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。...
js实现鼠标点击和松开事件
weixin_44486443的博客
02-21 1008
《专题技术文献》 开发工具与关键技术：Adobe Dreamweaver CC 2017 作者：落雨的天 撰写时间：2019.2.15 js实现鼠标点击和松开事件 首先我们创建一个HTML， 在给div添加css样式， 最后就是js部分了， 在function中后面的括号里面可以不用写a，然后下面的a可以改成this，然后就是给div添加鼠标点击和松开...
JS鼠标事件
小罗的博客
05-10 901
📗目录 鼠标事件 鼠标点击 鼠标定位 🍊鼠标事件 dblclick 双击鼠标左键时发生，如果右键也按下则不会发生 mousedown 单击任意一个鼠标按钮时发生 mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生 mouseover 鼠标指针移出某个元素到另一个元素上时发生 mouseup 松开任意一个鼠标按钮时发生 mousemove 鼠标在某个元素上时持续发生 onmouseover 注册鼠标经过时事件处理函数 onmouseout 注册鼠标移开时事件处理函数
js 获取鼠标位置
huolan__34的博客
12-27 1640
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。 属性及其兼容性 属性 说明 兼容性 clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 ...
JavaScript鼠标点击事件
weixin_57762531的博客
12-19 3372
鼠标事件指通过鼠标触发事件, 类似用户的行为: Onclick：当单击鼠标时运行脚本 Ondblclick：当双击鼠标时运行脚本 Onmousedown:当按下鼠标按钮时运行脚本 onmousemove:当鼠标指针移动时运行脚本 Onmouseout:当鼠标指针移出元素时运行脚本 Onmouseover:当鼠标指针移至元素之上时运行脚本 Onmouseup:当松开鼠标按钮时运行脚本 Onmousewhee;当转动鼠标滚轮时运行脚本 ...
js完成鼠标点击事件
最新发布
qq_40677969的博客
02-23 148
JS实现鼠标点击
js鼠标事件
m0_57774967的博客
05-06 797
通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移..
JavaScript事件 鼠标事件
LILI_JU88的博客
03-29 2347
JavaScript事件，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说，有下面这些代 表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等。 鼠标事件，就是用鼠标完成的交互动作，鼠标事件是 Web 开发中最常用的事件类型 鼠标事件类型 鼠标点击事件包括4个：click（单机）dblclick（双击）、mousedown（按下） 和 mouseup（松开），其中click件类型比...
js中event对象集合
LoveBeyond
08-26 148
JS中判断鼠标按键的问题。 IE 左键是 window.event.button = 1 右键是 window.event.button = 2 中键是 window.event.button = 4 没有按键动作window.event.button = 0 Firefox 左键是 event.button = 0 右键是 event.button = 2 中键是...
【js中鼠标点击、移动和光标移动的事件触发】
zz130428的博客
03-16 2569
事件有三要素：事件源、事件数据、事件处理程序 事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发 可以加return false;是阻止默认操作 onclick: 鼠标单击触发 ondblclick: 双击触发 onmouseover: 鼠标移动上面触发 onmouseout: 鼠标离开时触发 onmousemove: 鼠标在上面移动时触发 onchange: 只要内容改变触发 onblur: 失去焦点时触发 onfocus: 获得焦点时..
js--鼠标点击移动松开事件、滚轮事件、键盘事件
qq_42681787的博客
02-28 737
目录 1.推拽 2.滚轮事件 3.键盘事件 1.推拽 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ widt...
【JavaScript 教程】事件——鼠标事件
油墨香^-^的博客
06-08 1829
作者 | 阮一峰 鼠标事件的种类 鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。 click：按下鼠标（通常是按下主按钮）时触发。 dblclick：在同一个元素上双击鼠标时触发。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时
python组播通信
u012133341的博客
07-16 4053
发送端 import time import socket # 组播组IP和端口 mcast_group_ip = '234.2.2.2' mcast_group_port = 23456 def sender(): # 建立发送socket，和正常UDP数据包没区别 send_sock = socket.socket(socket.AF_INET, socket.SOCK...
JavaScript模拟鼠标点击事件
热门推荐
shuncheng_hu的博客
02-14 1万+
// function function emulateMouseClick (element) { // 创建事件 var event = document.createEvent('MouseEvents') // 定义事件 参数： type, bubbles, cancelable event.initEvent('click', true, true) // 触发对象可以是任何元素或其他事件目标 element.dispatchEvent(event) } // test
JavaScript中的点击事件
weixin_44558721的博客
10-24 6766
JavaScript中的基础知识
JS 模拟鼠标自动点击【浏览器内】
qq_22841387的博客
05-25 6996
问题描述 作为一个有思想的前端人员，往往对于需要在网页填写信息的时候，总是喜欢用JS对页面进行瞎操作。 在用JS代码实现自动填写问卷之后，我现在想尝试自动提交。但是奈何提交按钮对应的click事件不是一个函数，而是一段内嵌的script代码 所以，现在我想实现使用JS实现模拟点击 解决代码 $('#tj').trigger('click') 使用上述代码即可实现对于特定ID或者特定class的点击事件 ......
js鼠标点击事件监听
qx020814的博客
07-21 5151
将点击事件设置为f()函数返回的值，在函数中判断是否符合规定。鼠标在指定区域div中每移动一次就会更改数值。
JS常用鼠标事件
刘鹏博的博客
02-04 2554
JS常用鼠标事件         适合初学者的JS常用鼠标事件，包括 1、鼠标单击事件；2、鼠标双击事件；3、鼠标悬浮事件；4、鼠标移动事件；5、鼠标按下事件；6、鼠标抬起事件。 效果如图： 代码如下： JS常用鼠标事件 li{font-size: 18px;line-height: 35px;} l
常见的鼠标事件
hongchen_lian的博客
01-09 1589
常见的鼠标事件 click：单击事件 dblclick：双击事件 mousedown：按下鼠标键时触发 mouseup：释放按下的鼠标键时触发 mousemove：鼠标移动事件 mouseover：移入事件 mouseout：移出事件 mouseenter：移入事件 mouseleave：移出事件 contextmenu：右键事件 mouseover事件和mouseenter事件，都是鼠标进入一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_57762664

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值