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 事件的事件处理函数就是: ...
随机推荐
- vue 音乐播放器报错
使用Vue报错[Vue warn]: Error in nextTick: "TypeError: fn.bind is not a function"页面进不去. 检查:看看da ...
- SCI收录的期刊查询
SCI 收录的期刊查询(动态) 1.Science Citation Index (SCI)收录期刊查询地址:http://www.isinet.com/cgi-bin/jrnlst/jlopti ...
- 【Linux】Linux 找回Root用户密码
Root密码破解 Linux 忘记Root密码 ? 技术学习基本原则:不作恶 一.破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单按e进入编辑模式 3.编辑kernel那行添加/ ...
- Android自定义之ScrollView下拉刷新
公司项目,需要用到ScrollView的下拉刷新,一开始使用的时候PullToRefresh三方库的下拉刷新,我比较纠结第三档库,很强大,但是,公司项目的需求,PullToRefresh就不能做到了, ...
- show_sql和format_sql
<property name="show_sql">true</property> <property name="hibernate.fo ...
- SVNKit学习——使用High-Level API管理Working Copy示例(六)
本篇内容是基于SVNKit High-Level API实现的针对Working copy的操作,操作内容与SVN图形化界面.命令行类似. High-Level API类图: 核心思想: 所有操作由各 ...
- String, StringBuffer and StringBuilder
一 String 概述: String 被声明为 final,因此它不可被继承. 在 Java 8 中,String 内部使用 char 数组存储数据. public final class Stri ...
- Jerry的CRM Middleware(中间件)文章合集
我在SAP成都研究院做过的CRM中间件的项目其实并不是很多: 1. 2013年下半年和2014年上半年曾经支持过中联重科和蒙牛的CRM项目相关的中间件问题; 2. 2014年上半年做过一个CRM物料主 ...
- 测试笔记：jsonp跨域接口测试
原先测过这个接口,前后端同源(域名,协议,端口相同),开发提供的文档: $.post("http://host/url", { data1: "data1", ...
- Java字符串常量池是什么?为什么要有这种常量池？
简单介绍 Java中的字符串常量池(String Pool)是存储在Java堆内存中的字符串池.我们知道String是java中比较特殊的类,我们可以使用new运算符创建String对象,也可以用双引 ...