JS实现鼠标单击与双击事件共存

在JavaScript中，实现鼠标单击（click）与双击（dblclick）事件共存时，需要特别注意事件的触发顺序和避免不必要的重复触发。由于双击事件本质上是两次快速的单击事件，如果不加以处理，双击事件触发时，单击事件也会被触发。

以下是一个简单的示例，展示如何区分并处理这两种事件，使得它们能够共存而不互相干扰：

let lastClick = 0;

function clickAction() {
    const now = new Date().getTime();
    // 设定一个时间阈值，比如300毫秒，来判断是单击还是双击
    if (now - lastClick > 300) {
        // 超过时间阈值，认为是单击
        console.log('单击事件被触发');
        // 在这里添加单击时你想要执行的代码
    }
    // 更新最后一次点击的时间
    lastClick = now;
}

function dblclickAction() {
    // 这里处理双击事件
    console.log('双击事件被触发');
    // 在这里添加双击时你想要执行的代码
    // 注意：由于双击会触发两次clickAction，但我们已经通过时间阈值过滤了第一次单击
    // 因此这里不需要再次更新lastClick
}

// 假设我们有一个元素id为'myElement'
const element = document.getElementById('myElement');

// 绑定单击事件
element.addEventListener('click', clickAction);

// 绑定双击事件
element.addEventListener('dblclick', dblclickAction);

在上述代码中，`clickAction` 函数首先会检查当前时间与上一次点击时间的差值。如果这个差值大于设定的时间阈值（例如300毫秒），则认为这是一次单独的单击事件，并执行相应的代码。如果双击事件被触发，由于它实际上包含了两次单击事件，但第一次单击事件会被时间阈值过滤掉，所以只会在第二次单击时触发`dblclickAction`函数，从而实现了单击与双击事件的共存。

注意：在实际应用中，时间阈值（本例中的300毫秒）可能需要根据具体的应用场景进行调整。