JavaScript常见鼠标事件与用法分析

最新推荐文章于 2023-02-23 15:29:37 发布
最新推荐文章于 2023-02-23 15:29:37 发布
阅读量605 收藏
点赞数
分类专栏： # JavaScript
原文链接：https://www.jb51.net/article/153961.htm
版权

本文实例讲述了JavaScript常见鼠标事件与用法。分享给大家供大家参考，具体如下：

JavaScript 鼠标事件有以下8种

mousedown
鼠标的键钮被按下。

mouseup
鼠标的键钮释放弹起。

click
鼠标左键（或中键）被单击。

事件触发顺序是：mousedown -> mouseup -> click

dblclick
鼠标左键（或中键）被双击。

事件触发顺序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。

contextmenu
弹出右键菜单，它可能是鼠标右键触发的，也可能是键盘的菜单键触发的。

mouseover
鼠标移动到目标上方。

mouseout
鼠标从目标上方移出。

mousemove
鼠标在目标上方移动

注意：事件名称大小写敏感。若需要监听以上事件，则在事件名的前面加个on即可。

事件区别

onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

全局事件对象event

event.x
事件发生时鼠标的位置

event.y
事件发生时鼠标的位置

button
鼠标的哪一个键触发的事件

0
鼠标左键
1
鼠标中键
2
鼠标右键

代码范例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<html>

  <body>

    <script type="text/javascript">

      function appendText(str) {

        document.body.innerHTML += str + "<br/>";

      }

      document.onmousedown = function() {

        appendText("onmousedown");

        appendText("button = " + event.button);

        appendText("(x,y) = " + event.x + "," + event.y);

      }

      document.onmouseup = function() {

        appendText("onmouseup");

      }

      document.onclick = function() {

        appendText("onclick");

      }

      document.ondblclick = function() {

        appendText("ondblclick");

      }

      document.oncontextmenu = function() {

        appendText("oncontextmenu");

      }

      document.onmouseover = function() {

        appendText("onmouseover");

      }

      document.onmouseout = function() {

        appendText("onmouseout");

      }

      document.onmousemove = function() {

        appendText("mousemove");

      }

    </script>

  </body>

</html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，得到如下运行结果：

 

感兴趣的朋友可以使用本站在线工具测试一下上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

PrinciplesMan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mousedown、mouseup、click事件之间的关系及执行顺序
u011200562的博客
10-30 1168
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生mousedown事件。 与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。 mouseup 当在元素上松开鼠标按键（左、右键均可）时，会发生mouseup事件。 与click事件不同，mouseup事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。 click 当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，...
javascript中onmousemove、onmouseover、onmouseenter 的不同
程序员秋风的博客
01-26 1270
在比较onmousemove、onmouseover、onmouseenter 的不同之前，首先我们先看看各种onmouse事件的作用： onmousedown 当元素上按下鼠标按钮时出发 onmousemove 当鼠标指针移动到水元素上时触发 onmouseover 当鼠标指针移动元素上时触发 onmouseout 当鼠标指针移出指定的对象时发生。 onmouseup
onMouseOver, onMouseMove, onMouseDown, onMouseUp, onMouseOut 的介绍和区别
Hyh's Blog
09-19 2167
简单介绍：    onMouseOver 鼠标移动到对象上时触发事件。   onMouseMove 鼠标在对象上移动时触发事件。 注：每当鼠标移动一个像素，就会触发一个 mousemove 事件。这会耗费大量的系统资源，因此请审慎地使用该事件。   onMouseDown 鼠标按键按下时触发事件。   onMouseUp 鼠标按键弹起时触发事件。
JavaScript获取鼠标位置的三种方法
we
05-17 9784
在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果，这篇文章就鼠标点击位置坐标获取做一些简单的总结。 获取鼠标位置首先要了解什么是event，event是一个声明了全局变量的一个对象，在chrome和IE下，可以随意访问，对于好奇的朋友console.log一下event。但！！！Firefox下是没有event这个对象的！！ 好消息的是：在IE8，chrome下，是有event这个对象的！ 鼠标点击位置坐标
JS事件之鼠标事件
qq_57215961的博客
05-25 2519
鼠标事件的类型 onclick：单击事件 ondblclick：双击 oncontextmenu：右键菜单 onmouseover：鼠标移入 onmouseout：鼠标移出 onmouseenter：鼠标移入 onmouseleave：鼠标移出 onmousedown：鼠标按下 onmouseup：鼠标抬起 onmousemove：鼠标移动 onmouseover、onmouseout与onmouseenter、onmouseleave 两者都有鼠标移入移出的作用，但是建议使用on
dailyLearn:javascript，实现数据结构和算法题
05-07
使用javascript实现经典的数据结构面试题。练手和温习 水平有限，如有缺漏，望见谅！ 文件结构： 1）ADT ———— 抽象数据类型（ADT） 包含：list（列表），llist（链表），queue（队列），stack（堆），tree（树）...
yurijs:将Vue模板与react＆mobx一起使用
05-06
Mobx + PureMVVM + YuriJS为什么选择Mobx 请参阅： 核心概念很简单强大的MVVM模式可重用的MVVM方法/类极快：组件级叶子更新可重用的MVVM方法/类重用一些常见的MVVM模式很重要。 有许多常见的模式。 您可以编写甚至更...
Jquery基础之事件操作详解
12-01
页面加载完毕后浏览器会通过javascript为Dom元素加载事件，使用Javascript时候使用的是[removed]方法，而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同。 [removed]方法 $(document).ready()...
js鼠标事件(底下汇总)
m0_63400611的博客
12-12 165
常用鼠标事件 1.禁止鼠标右键菜单 contextmenu 主要控制何时显示上下文菜单,主要用于取消默认的上下文菜单 代码 //禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault();//阻止默认行为 }) 2.禁止鼠标选中 代码 //禁止选中文字 document.addEventListener('selectstart', function(e) { .
js常用方法（js常用鼠标事件和其对应的方法）
10-08
js常用方法 欢迎大家下载!里面的内容很多，主要有js的常用鼠标事件的方法！喜欢js的朋友可以下载！很全面的！
js捕获所有鼠标点击事件及其它
zb219的专栏
06-04 4884
adsfsdfdfdfdfsdfadsfsdfdfdfdfdfdfdfdfadsfsdfdfdfdfdfdfdfdfvar temEventobject=null;var temshowTag=false;function document.onclick(){  if(event.srcElement.abc==null&&temshowTag==false)  {   var temabc
js鼠标事件大全
fuda_1985的专栏
05-06 466
js鼠标事件大全 一般事件事件        浏览器支持        描述onClick        IE3|N2|O        鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick        IE4|N4|O        鼠标双击事件onMouseDown        IE4|N4|O        鼠标上的按钮被按下了onMouseU
JavaScript 常见鼠标事件
m0_57835615的博客
06-16 1723
在JavaScript 中，常见的鼠标事件有： （1）鼠标按下事件 （2）鼠标抬起事件 （3）鼠标单击事件 （4）鼠标双击事件、
JS DOM编程笔记 - 详解鼠标事件（十六）
小帅的编程笔记
11-01 669
今天我们来学习 JavaScript 中的基本鼠标事件及其属性，包括9个鼠标事件和一些有用的事件对象的属性。 Mouse 鼠标事件介绍 当我们使用鼠标与页面上的元素进行交互时就会触发鼠标事件，DOM 3级定义了九个鼠标事件。 mousedown, mouseup 和 click 当我们点击一个元素时，会按照下面顺序触发至少3个鼠标事件 当我们在元素上按下鼠标时，mousedown 会触发 当我们在元素上松开鼠标时，mouseup 会触发。 当元素触发了一个mousedown 和一个mouseup ，就会触
js完成鼠标点击事件
qq_40677969的博客
02-23 2102
JS实现鼠标点击
学习笔记（11）js事件
dugujiuding的博客
08-31 557
js事件
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
vue echarts 鼠标事件
03-05
Vue和Echarts是两个独立的技术，分别用于构建前端应用和可视化图表。Vue是一套用于构建用户...以上只是一些常见的鼠标事件，Echarts还提供了其他更多的事件供开发者使用。具体的事件处理方式可以参考Echarts官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值