当前位置：首页 > JavaScript

js实现鼠标点击

2026-01-30 15:58:28JavaScript

鼠标点击事件监听

在JavaScript中监听鼠标点击事件可以通过addEventListener方法实现。以下是基础代码示例：

document.addEventListener('click', function(event) {
  console.log('鼠标点击位置：', event.clientX, event.clientY);
});

特定元素点击处理

针对特定DOM元素的点击事件，需要先获取元素引用：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('按钮被点击');
});

事件对象属性

点击事件对象包含有用信息：

event.target：触发事件的元素
event.currentTarget：绑定事件的元素
event.clientX/Y：相对于视口的坐标
event.pageX/Y：相对于文档的坐标

document.addEventListener('click', function(e) {
  console.log('触发元素：', e.target.tagName);
});

阻止默认行为

某些元素（如链接）需要阻止默认点击行为：

const link = document.querySelector('a');
link.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('阻止了链接跳转');
});

双击事件处理

使用dblclick事件监听双击操作：

const box = document.querySelector('.box');
box.addEventListener('dblclick', function() {
  this.style.backgroundColor = 'red';
});

事件委托模式

对于动态元素或大量子元素，使用事件委托：

document.getElementById('list').addEventListener('click', function(e) {
  if(e.target.classList.contains('item')) {
    console.log('点击了列表项：', e.target.textContent);
  }
});

移动端触摸兼容

需要同时考虑触摸设备时，可组合使用事件：

const elem = document.getElementById('touchElem');
elem.addEventListener('click', handleTap);
elem.addEventListener('touchend', handleTap);

function handleTap(e) {
  e.preventDefault();
  console.log('点击/触摸触发');
}

自定义点击效果

实现点击涟漪动画效果示例：

js实现鼠标点击

document.querySelectorAll('.ripple').forEach(btn => {
  btn.addEventListener('click', function(e) {
    const x = e.clientX - e.target.getBoundingClientRect().left;
    const y = e.clientY - e.target.getBoundingClientRect().top;

    const ripple = document.createElement('span');
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    this.appendChild(ripple);

    setTimeout(() => ripple.remove(), 500);
  });
});