js实现鼠标
鼠标事件监听
在JavaScript中，可以通过addEventListener方法监听鼠标事件。常用事件包括click、mousedown、mouseup、mousemove等。示例代码展示如何监听点击事件：
document.addEventListener('click', function(event) {
console.log('鼠标点击坐标:', event.clientX, event.clientY);
});鼠标位置获取
通过事件对象的clientX和clientY属性可获取鼠标相对于视口的坐标。pageX和pageY则包含滚动偏移量。示例获取鼠标移动时的坐标：
document.addEventListener('mousemove', function(event) {
console.log('视口坐标:', event.clientX, event.clientY);
console.log('页面坐标:', event.pageX, event.pageY);
});自定义鼠标样式
使用CSS的cursor属性可修改鼠标指针样式。JavaScript动态修改示例：
document.body.style.cursor = 'pointer'; // 更改为手型图标鼠标拖拽实现
实现元素拖拽需要组合mousedown、mousemove和mouseup事件。示例代码片段：
let isDragging = false;
element.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (event) => {
if (isDragging) {
element.style.left = event.clientX + 'px';
element.style.top = event.clientY + 'px';
}
});鼠标滚轮事件
通过wheel事件监听滚轮动作，deltaY属性判断滚动方向：
window.addEventListener('wheel', function(event) {
if (event.deltaY < 0) {
console.log('向上滚动');
} else {
console.log('向下滚动');
}
});
