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 事件的事件处理函数就是: ...
随机推荐
- 转：SQL Server附加数据库提示“版本为661，无法打开，支持655版本……”
在我们使用别人导出的数据库的时候,有时候我们会通过附加数据库的方法,把别人导出的数据库附加到我们的电脑中,这时,或许你会遇到这种问题,附加时,提示版本为XXX,无法打开,支持AAA版本. 这是怎么回事 ...
- 使用cookie实现只出现一次的广告代码效果
我们上网经常会遇到第一次需要登录而之后不用再登录的网站的情况,其实是运用了Cookie 存储 web 页面的用户信息,Cookie 以名/值对形式存储,当浏览器从服务器上请求 web 页面时, 属于该 ...
- Java—IO流 File类的常用API
File类 1.只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问. package cn.test; import java.io.File; import java.io.IOE ...
- nginx下的nagios pnp4nagios
#Spawn-FCGI 一个通用的FastCGI管理服务器,它是lighttpd中的一部份,很多人都用Lighttpd的Spawn-FCGI进行FastCGI模式下的管理工作 #fcgiwrap(Si ...
- [EffectiveC++]item40：明智而审慎地使用多重继承
- Ant Design项目记录和CSS3的总结和Es6的基本总结
这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...
- Smart template的控件能否当成普通控件来用
我的同事问过我这个问题: 只要弄清楚Smart control的原理,就能回答这个问题. 答案是: smart control可以像普通的控件一样在xml view中被定义和使用,但是必须结合ODat ...
- c++互斥锁的实现
class IMyLock { public: virtual ~IMyLock(){} ; ; }; class Mutex : public IMyLock { public: Mutex(); ...
- Android（java）学习笔记14：Java线程池
1. 线程池: 1)程序启动一个新线程成本是比较高的,因为它涉及到要与操作系统进行交互.而使用线程池可以很好的提高性能,尤其是当程序中要创建大量生存期很短的线程时,更应该考虑使用线程池. 2)线程池里 ...
- 【洛谷5288】[HNOI2019] 多边形（二叉树模型）
点此看题面 大致题意: 给你一个多边形,用若干不重合.不相交的线段将其划分为若干三角形区域,并定义旋转操作\((a,c)\)为选定\(4\)个点\(a,b,c,d\)满足\(a<b<c&l ...