当鼠标在超链接上移动时,窗口上显示鼠标指针在窗口中的坐标
时间: 2023-12-03 09:05:25 浏览: 131
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
可以通过监听 `mouseover` 事件,判断当前鼠标是否在超链接上,如果在,则监听 `mousemove` 事件,获取当前光标位置,并将其显示在窗口上。具体代码如下:
```html
<a href="#" id="link">超链接</a>
<div id="position"></div>
```
```javascript
var link = document.getElementById('link');
var position = document.getElementById('position');
link.addEventListener('mouseover', function(event) {
// 当鼠标进入超链接时,监听mousemove事件
document.addEventListener('mousemove', showPosition);
});
link.addEventListener('mouseout', function(event) {
// 当鼠标离开超链接时,取消监听mousemove事件
document.removeEventListener('mousemove', showPosition);
position.innerHTML = ''; // 清空显示
});
function showPosition(event) {
// 显示光标位置
var x = event.clientX; // 鼠标相对于窗口左边缘的横坐标
var y = event.clientY; // 鼠标相对于窗口上边缘的纵坐标
position.innerHTML = 'X坐标:' + x + ', Y坐标:' + y;
}
```
这样,在鼠标进入超链接时,就会显示当前光标位置的坐标信息。当鼠标离开超链接时,坐标信息会被清空。
阅读全文