JavaScript常见鼠标事件与用法分析

JavaScript 鼠标事件有以下8种

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
事件发生时鼠标的位置

button
鼠标的哪一个键触发的事件

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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，得到如下运行结果：

转载于:https://www.cnblogs.com/raineliflor/p/10397036.html

JavaScript常见鼠标事件与用法分析相关推荐

java鼠标js触发事件吗,JavaScript常见鼠标事件与用法分析
摘要:这篇JavaScript栏目下的"JavaScript常见鼠标事件与用法分析",介绍的技术点是"JavaScript.鼠标事件.鼠标.事件.用法.分析", ...
JavaScript 常见鼠标事件
JavaScript 中常见的鼠标事件: (1)鼠标按下事件(mousedown):鼠标按钮被按下时触发. 示例: <!DOCTYPE html> <html lang=" ...
Javascript中鼠标事件
鼠标中的几个事件简单的介绍一下鼠标事件的用法,如当一个注册界面要求录入信息后移开鼠标,后面显示判断录入的信息格式是否正确 <!DOCTYPE html> <html>< ...
JavaScript DOM / BOM （查询获取元素对象【增、删、改、查】）以及常见鼠标事件
1.查询获取元素(查) 1.1.根据ID获取 document.getElementById('id'); 1.2.根据标签名获取1(使用 getElementsByTagName() 方法可以返回带 ...
JavaScript --- 取得鼠标事件的坐标
说明: clientX和clientY属性:事件发生时,鼠标指针在视口中的水平和垂直坐标. pageX和pageY属性:鼠标光标在页面中的位置. screenX和screenY属性:鼠标事件发生时,鼠 ...
JavaScript的鼠标事件
鼠标事件 Click 当鼠标单击时,触发 Dblclick 当鼠标双击时,触发 Mouseenter 当鼠标指针,进入元素时,触发 Mouseleave 当鼠标指针,离开元素时,触发
[js点滴]JavaScript之鼠标事件04
鼠标事件事件种类鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...
js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）
js鼠标事件,相关属性: var div = document.getElementById("box")// 1.单击事件 onclickdiv.onclick = functi ...
面试题58：javascript中鼠标事件有哪些
鼠标事件有: 1.click(单击)事件: 2.dblclick(双击)事件: 3.mousedown事件: 4.mouseup事件: 5.mouseout事件: 6.mouseover事件: 7.m ...
javascript中change事件的用法
change 事件被<input>, <select>, 和<textarea> 元素触发.//触发情况 1.<input type="radio& ...

JavaScript常见鼠标事件与用法分析

JavaScript常见鼠标事件与用法分析相关推荐

最新文章

热门文章