如果释放鼠标时内部元素未悬停，则防止触发“单击”的正确方法

Correct way to prevent triggering `click` if inner element is not hovered when mouse is released

本文关键字：单击 方法 内部 鼠标 释放 元素 悬停 如果      更新时间：2024-05-06

当用户单击对话框，然后将鼠标移动到对话框外部并释放它时，我需要防止隐藏模式对话框。对话框位于注册click事件的外部div中。以下是模式对话框及其设置的示例。

所以我做了以下工作：

var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
    // this is how I do it to prevent triggering of click event
    pointerDownElement = event.target;
    // this is how a browser does it
    pointerDownElement = event.currentTarget;
});
$('.d1').on('mouseup', function(event) {
    var element = event.target;
    if (element === pointerDownElement) {
        console.log('triggering click');
    }
});

这种方法正确吗？

你肯定走在了正确的轨道上。略有修改的代码：

var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
    event.preventDefault();
    pointerDownElement = event.currentTarget;
    return false;
});
$('.d1').on('mouseup', function(event) {
    if (event.target=== pointerDownElement) {
        console.log('triggering click');
    }
});

如果只使用一次变量，则无需为其赋值。此外，event.prventDefault（）；并返回false；将保证事件的默认行为不会发生（并不是说通常有一个用于mousedown的行为，但我假设您有理由包含此代码）。

相关文章：