JavaScript鼠标事件
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
鼠标右键
<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代码运行结果
JavaScript鼠标事件的更多相关文章
- 小试牛刀JavaScript鼠标事件
鼠标事件练习1 当鼠标点击网页某个单元格的时候,其他的单元格颜色不变,只有被点击的单元格颜色发生变化 <style type="text/css"> *{ margin ...
- JavaScript 鼠标事件
鼠标事件是Web开发中最常用的一类事件. DOM3级事件中定义了9个鼠标事件,分别如下: click.dbclick.mousedown.mouseenter.mouseleave.mousemove ...
- JavaScript鼠标事件，点击鼠标右键，弹出div
document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('b ...
- Javascript鼠标事件大全
事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N ...
- js 鼠标事件的抓取代码
js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...
- javaScript事件（五）事件类型之鼠标事件
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
- JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
- JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- JavaScript的事件的处理函数（鼠标，键盘，HTML）
事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是: ...
随机推荐
- 在Eclipse安装Genymotion插件的经验心得
个人心得分享,不当之处还请指正. Eclipse自带的Android模拟器已经无力吐槽了,新手刚上手时或许配置完环境已经精疲力尽了,或许还沉浸在开发成功的喜悦当中,对AVD模拟器的运行情况关注不大,渐 ...
- linux 服务注册 service文件 在service文件中设置变量和环境变量
[Unit] Description= #服务描述 After=syslog.target #服务启动依赖 [Service] Type=forking #服务启动类型 可 ...
- 关于Oracle RAC节点间免密码策略
在RAC安装过程中无论grid或是Oracle软件都需要配置节点间免密码策略.配置方法网上有很多,oracle和可以帮你配置,此处不多说. 但是在RAC运行过程中是不需要免密码登陆的,所以在集群安装完 ...
- Android SDK Manager 如何下载？
修改 "C:\Windows\System32\driver\etc\hosts" 文件,添加以下两行 203.208.40.111 dl-ssl.google.com 203.2 ...
- Template Pattern & Strategy Pattern
详细见<C++设计模式 23种设计模式.pdf 55页> 在面向对象系统的分析与设计过程中经常会遇到这样一种情况:对于某一个业务逻辑(算法实现)在不同的对象中有不同的细节实现,但是逻辑(算 ...
- 【转】ssh timed out 超时解决方案
转自:http://www.cnblogs.com/niutouzdq/p/4091268.html 在使用阿里云ECS服务器的时候,winsftp经常被服务器断开,想必是过一会没有操作,防火墙喜欢对 ...
- 给Retext进行配置：语法高亮、数学公式、自定义样式
由于转到了Ubuntu下,本来在Windows平台下使用的一直是MarkdownPro2,而且进行了破解,十分好用.转到Ubuntu下后,MarkdownPro2不能够使用了,找了下Linux平台中的 ...
- CSU计算机研究生推免
考研复习 一开始,我是没有想到能够拿到研究生推免资格的,从今年3月份到整个暑假过完,一共6个月的时间,我一直在准备考研. 具体来说,我是在准备考研数学,整整6个月时间的数学复习,给我一种感觉,把大一大 ...
- 【[HNOI2011]数学作业】
我又对着跑出正解的程序调了好久 怕不是眼瞎了 这就是个分段矩阵,我们很容易就得到了递推式 $\(f[i]=f[i-1]*10^k+i\) 其中\(k=log_{10}i\) 于是就是分段矩阵 之后就是 ...
- HashMap对HashCode碰撞的处理
先说Java之外的,什么是拉链法?怎么解决冲突的: 拉链法解决冲突的做法是:将所有关键字为同义词的结点链接在同一个单链表中. 若选定的散列表长度为m,则可将散列表定义为一个由m个头指针组成的指针数组t ...