Javascript 如何在鼠标悬停事件处理程序中创建单击事件处理程序？

我正在尝试构建某种元素检查器（比如在Chrome/FF中）

流程如下：

单击“开始检查”按钮

您将鼠标悬停在必需的元素上

单击该元素

您应该在控制台中看到该元素

代码如下：

startInspection=function（）{
$（'section*'）。on（'mouseover.INSPECTOR'，函数（e）{
$（'.hovered-element'）.removeClass（'hovered-element'）；
$（e.target）.addClass（'hovered-element'）；
$（this）.on（'click.INSPECTOR'，函数（e）{
$（'section*'）.off（'mouseover.INSPECTOR'）；
$（'section*'）.off（'click.INSPECTOR'）；
$（'.hovered元素'）.removeClass（“hovered元素”）；
console.log（如target）；
});
});
};

问题是：每次我将鼠标悬停在某个元素上，单击事件处理程序都会附加到该元素上。因此如果我将鼠标悬停在

p

元素上5次，然后单击它-我将看到5个

控制台。log

s而不是1个

我试图使用

mouseenter/mouseleave

实现它，但面临的问题是，每个元素只能悬停一次-

因此如何改进代码，使其无论在元素上停留多少次，都只有一个单击处理程序？

---

提前感谢，任何帮助都将不胜感激

是否尝试将

onclick

处理程序移到

鼠标上方

之外

startInspecting = function(){
    $('section *').on('mouseover.INSPECTOR', function(e){
        $('.hovered-element').removeClass('hovered-element');
        $(e.target).addClass('hovered-element');        
    }).on('click.INSPECTOR', function (e) {
        $('section *').off('mouseover.INSPECTOR click.INSPECTOR');
        console.log(e.target);
    });
};

---

我建议把它分成几个部分。用户点击“开始检查”，您的页面进入检查模式，在该模式下，它会将css动态添加到悬停在上面的每个元素，使其看起来类似于Chrome。当您在检查模式下单击某个图元时，您可以按自己的方式处理它。这样，您只需为每个元素添加一个悬停和一个单击处理程序，从而只触发一次事件。

将

单击处理程序移动到
悬停
函数之外