js实现鼠标点击

鼠标点击事件监听

使用 addEventListener 监听鼠标点击事件，通过 click 事件类型触发回调函数。

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

自定义点击行为

通过阻止默认行为或修改事件目标，实现自定义点击逻辑。例如禁用链接跳转：

document.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();
    alert('链接点击被拦截');
});

动态元素点击委托

对动态生成的元素使用事件委托，通过父元素监听子元素点击：

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('dynamic-element')) {
        console.log('动态元素被点击');
    }
});

双击事件处理

监听 dblclick 事件实现双击响应，注意与单击事件区分：

let clickTimer;
element.addEventListener('click', function() {
    clearTimeout(clickTimer);
    clickTimer = setTimeout(() => {
        console.log('单击事件');
    }, 300);
});

element.addEventListener('dblclick', function() {
    clearTimeout(clickTimer);
    console.log('双击事件');
});

鼠标按键检测

通过 event.button 属性识别特定鼠标按键（0-左键，1-中键，2-右键）：

document.addEventListener('mousedown', function(e) {
    if (e.button === 2) {
        console.log('右键点击');
    }
});

触摸屏兼容处理

添加 touchstart 事件支持移动端触摸操作：

element.addEventListener('touchstart', function(e) {
    e.preventDefault();
    console.log('触摸事件', e.touches[0].clientX);
});