JavaScript onmouseup 事件
当鼠标按键(任何一个键)被松开时,会触发 onmouseup 事件,如下例子所示:
<html> <body> <p> <img src="http://www.zhimatong.com/style/css/img/logo.png" onmouseup="alert('您点击了这幅 图片!')" /> </p> </body> </html>
在这个例子中,将鼠标放在图片上,当按下任何一个鼠标键后松开时,就会弹出提示窗口:您点击了这幅图片!。
您可以点击下面的图片试试:
适当延长按下鼠标键后释放鼠标键的事件,能感觉得到 onmouseup 事件是在鼠标按键释放的时候触发的。在应用中,
识别用户的按键
利用 JavaScript onmouseup 事件的 event.button 属性,可以识别用户按下的键,将上面的例子进行改造:
<html> <script type="text/javascript"> function pressButton(evt){ var key; switch( evt.button ) { case 1: key = "左键"; break; case 2: key = "右键"; break; case 3: key = "左键和右键"; break; case 4: key = "中键"; break; case 5: key = "左键和中键"; break; case 6: key = "中键和右键"; break; case 7: key = "所有键"; break; } alert(key + "点击了图片!"); } </script> <body> <p> <img src="http://www.zhimatong.com/style/css/img/logo.png" onmouseup="pressButton(event)" /> </p> </body> </html>
运行上面的例子,不同的按键,会有不同的提示信息。除了 onmouseup 事件,也可以利用 onmousedown 事件来识别用户的按键,并且 onmouseup 事件通常无法识别双键同时按下的效果,而 onmousedown 事件则可以识别。
本章节内容共分 22 部分:
- JavaScript 事件
- JavaScript onclick 事件:鼠标点击页面某个对象
- JavaScript ondblclick 事件:鼠标双击页面某个对象
- JavaScript onmousedown 事件:鼠标任何一个按键被按下
- JavaScript onmouseup 事件:鼠标任何一个按键被松开
- JavaScript onmouseover 事件与 onmouseout 事件:鼠标指针移动到对象上或离开对象
- JavaScript onkeydown 事件:键盘上某个按键被按下
- JavaScript onkeypress 事件:按下或按住一个键盘按键
- JavaScript onkeyup 事件:键盘按键被松开
- JavaScript onblur 事件:页面元素失去焦点
- JavaScript onfocus 事件:页面元素获得焦点
- JavaScript onchange 事件:表单文本域或选择域发生改变
- JavaScript onsubmit 事件:表单被提交
- JavaScript onreset 事件:表单被重置
- JavaScript onload 事件:页面或图像加载完成后
- JavaScript onunload 事件:关闭页面或页面被改变为其他页面
- JavaScript onerror 事件:加载页面或图像时发生错误
- JavaScript onresize 事件:当浏览器窗口或 HTML 对象改变大小
- JavaScript onscroll 事件:滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
- JavaScript onselect 事件:文本框中的文本被选中
- JavaScript oncopy 事件:文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
- JavaScript oncut 事件与 onpaste 事件:文本域文本被剪切或粘贴(禁止粘贴实例)