为了了解鼠标事件的 DOM 事件,假设存在以下 HTML 结构:
<div id="items">
<ul>
<li id="item1"><button>item1</button></li>
<li id="item2"><button>item2</button></li>
<li id="item3"><button>item3</button></li>
</ul>
</div>
如果我们给 div[id="items"]
增加以下监听事件:
mousemove
: 当鼠标在相应的标签区域移动时,会触发该事件,由于该事件会非常被频繁的触发,在实际工程中,会按需设置防抖或截流。
mousedown
与mouseup
与click
: 当鼠标在区域按下鼠标时,会触发mousedown
事件,松开鼠标后,会触发mouseup
事件,二者组成click
事件。
mouseenter
与mouseleave
示例:当鼠标进入区域时,触发mouseenter
, 离开区域时,触发mouseleave
.
mouseover
与mouseout
示例:效果与mouseenter
类似,不同的是:进入/离开该标签下的每一项,都会触发改事件。
假设存在以下 HTML 结构:
<head>
<style>
#item {
width: 300px;
height: 300px;
background-color: #ffeccf;
}
</style>
</head>
<body>
<div id="item"></div>
<script>
item.onclick = (e) => {
// 该 e 的类型即为 MouseEvent, 它包含以下偏移量
// clientX, clientY
// offsetX, offsetY
// pageX, pageY
// screenX screenY
// layerX, layerY
// x y
c
}
</script>
</body>
Attribute | Explain |
---|---|
clientX , clientY |
光标相对于客户端窗口的水平/垂直位置 |
offsetX , offsetY |
光标相对于当前标签元素的左上角的水平/垂直位置 |
pageX , pageY |
光标相对于页面左上角的水平/垂直位置 |
screenX , screenY |
光标相对于屏幕的水平/垂直位置 |
layerX , layerY |
光标向上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角的水平/垂直位置 |
x , y |
同 clientX , clientY |
不论是否滚动,二者可以表示为:
若页面不存在滚动,即为 clientX
, clientY
.
但若页面存在滚动,则为 pageY = window.scrollY + e.clientY
.
二者可表示为:
二者可表示为: