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

事件发生时鼠标的位置

botton

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

0

鼠标左键

1

鼠标中键

2

鼠标右键

  1. <html>
  2.   <body>
  3.     <script type="text/javascript">
  4.       function appendText(str) {
  5.         document.body.innerHTML += str + "<br/>";
  6.       }
  7.       document.onmousedown = function() {
  8.         appendText("onmousedown");
  9.         appendText("button = " + event.button);
  10.         appendText("(x,y) = " + event.x + "," + event.y);
  11.       }
  12.       document.onmouseup = function() {
  13.         appendText("onmouseup");
  14.       }
  15.       document.onclick = function() {
  16.         appendText("onclick");
  17.       }
  18.       document.ondblclick = function() {
  19.         appendText("ondblclick");
  20.       }
  21.       document.oncontextmenu = function() {
  22.         appendText("oncontextmenu");
  23.       }
  24.       document.onmouseover = function() {
  25.         appendText("onmouseover");
  26.       }
  27.       document.onmouseout = function() {
  28.         appendText("onmouseout");
  29.       }
  30.       document.onmousemove = function() {
  31.         appendText("mousemove");
  32.       }
  33.  
  34.     </script>
  35.   </body>
  36. </html>

这里使用在线HTML/CSS/JavaScript代码运行结果

JavaScript鼠标事件的更多相关文章

  1. 小试牛刀JavaScript鼠标事件

    鼠标事件练习1 当鼠标点击网页某个单元格的时候,其他的单元格颜色不变,只有被点击的单元格颜色发生变化 <style type="text/css"> *{ margin ...

  2. JavaScript 鼠标事件

    鼠标事件是Web开发中最常用的一类事件. DOM3级事件中定义了9个鼠标事件,分别如下: click.dbclick.mousedown.mouseenter.mouseleave.mousemove ...

  3. JavaScript鼠标事件，点击鼠标右键，弹出div

    document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('b ...

  4. Javascript鼠标事件大全

    事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N ...

  5. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  6. javaScript事件（五）事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  7. JavaScript进阶系列07,鼠标事件

    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...

  8. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  9. JavaScript的事件的处理函数（鼠标，键盘，HTML）

    事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是: ...

随机推荐

  1. css 平行四边

    在视觉设计中,平行四边形往往给人一种动感. 要生成一个平行四边形,只要通过css变形,就可做到: -webkit-transform: skewX(-45deg); 那么生成一个平行四边形的按钮呢?列 ...

  2. SharePoint 2013 - Using Web Proxy

    用于在SharePoint中调用其它网站服务时使用. 1. 需要引用sp.js 和 sp.runtime.js文件: 2. 需要用到SP.WebRequestInfo,SP.WebProxy,和SP. ...

  3. 关于scheduleAtFixedRate方法与scheduleWithFixedDelay的使用

    一.scheduleAtFixedRate方法 该方法是ScheduledExecutorService中的方法,用来实现周期性执行给定的任务,public ScheduledFuture<?& ...

  4. HTML基础内容（持续更新...）

    1.<!DOCTYPE html>声明有助于浏览器中正确显示网页 HTML5<!DOCTYPE html>HTML 4.01<!DOCTYPE HTML PUBLIC & ...

  5. ORACLE_DELETE

    SQL DELETE Statement The SQL DELETE Statement The DELETE statement is used to delete existing record ...

  6. 从零搭建docker+jenkins 自动化部署环境

    从零搭建docker+jenkins+node.js自动化部署环境 本次案例基于CentOS 7系统 适合有一定docker使用经验的人阅读 适合有一定linux命令使用经验的人阅读 1.docker ...

  7. Oracle服务端及客户端搭建帮助文档

    Oracle服务端及客户端搭建帮助文档 目录 简介 Oracle服务端安装 Oracle客户端安装 PLSQL安装 登录测试 系统配置修改 用户操作 解锁账户.密码 创建账户及密码 配置监听文件 监听 ...

  8. NO.008-2018.02.13《折桂令·春情》元代：徐再思

    折桂令·春情_古诗文网   折桂令·春情 元代:徐再思 平生不会相思,才会相思,便害相思.生下来以后还不会相思,才刚刚懂了什么是相思,却深受着相思之苦. 身似浮云,心如飞絮,气若游丝.身像飘浮的云,心 ...

  9. 二、 OSI模型的实现TCP 、IP

    主要名词定义: IPIP层接收由更低层(网络接口层例如以太网设备驱动程序)发来的数据包,并把该数据包发送到更高层---TCP或UDP层:相反,IP层也把从TCP或UDP层接收来的数据包传送到更低层.I ...

  10. log4net 配置完成后发现不能输出日志的解决方法

    配置好log4net后发现日志不能输出,打开调试看一下几个属性都是false,(比如isdebugenable =false)这其实是项目的启动时候没有加入一行声明代码导致的,可以在程序的Assemb ...