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 事件的事件处理函数就是: ...
随机推荐
- 如何保护好我们的比特币(bitcoin)
转自:http://8btc.com/thread-819-1-1.html 随着比特币(BTC)的使用者越来越多:价格也很高(2013年,1比特币价格长期在100美元以上):同时比特币没有一个中央机 ...
- html-表单的设计
一.表单的设计 1.注册表单页面 <html> <head> <title>表单的练习</title> <script> function ...
- Windows装系统
这几天电脑频繁崩溃,自己尝试着装了几次系统,遇到一些问题.有的解决了,有的没解决.将其一一记录在这里,作为经验参考. 自己以前最常用的方式是直接通过ultraiso将IOS文件解压到到U盘,会将U盘做 ...
- apache-实战（一）
Apache 1.html的完整格式 # vim /var/www/html/index.html<html><head><title>我要</title& ...
- [EffectiveC++]item40：明智而审慎地使用多重继承
- 笔记本win8系统共享wifi上网方法
华硕笔记本电脑,安装了win8系统,使用wifi上网,由于连接无线路由的机器太多,超过路由连接数上限,因此转为使用笔记本共享wifi方式给手机上网. 最终上网方式为: 笔记本网卡接入无线路由器上网,笔 ...
- 从数据流角度管窥 Moya 的实现(一)：构建请求
相信大家都封装过网络层. 虽然系统提供的网络库以及一些著名的第三方网络库(AFNetworking, Alamofire)已经能满足各种 HTTP/HTTPS的网络请求,但直接在代码里用起来,终归是比 ...
- Python的免费在线学习课程
网上资源不是本人的,所以,只是转发.其它的不负责 http://www.imooc.com/learn/177
- [ZJOI2012]小蓝的好友
https://www.luogu.org/problemnew/show/P2611 题解 \(n\times m\)肯定过不去.. 我们把给定的点看做障碍点,考虑先补集转化为求全空矩阵. 然后我们 ...
- 2018.12.1 web项目中解决乱码问题的一个工具类
<!-- 配置一个过滤器 编码格式的过滤器 --> <filter> <filter-name>encodeFilter</filter-name> & ...