Question

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

流程如下：

您点击“开始检查”＆＃39;按钮。
将鼠标悬停在必要的元素上。
您点击该元素。
您应该在控制台中看到该元素。

以下是代码：

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

问题是：每次我将鼠标悬停在某个元素上时，都会附加点击事件处理程序。所以如果我将鼠标悬停在p元素上5次，然后点击它 - 我会看到5个console.log而不是1 。

我尝试使用mouseenter/mouseleave来实现它，但面对这个问题，每个元素只能悬停一次 - another JSFiddle example

所以如何改进我的代码，无论我将鼠标悬停在元素上多少次，它只有一个点击处理程序？

在此先感谢，任何帮助将不胜感激！

Answer 1

您是否尝试将onclick处理程序移到mouseover之外？

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);
    });
};

<强> DEMO

Answer 2

我建议把它分成几部分。用户点击＆＃34;开始检查＆＃34;并且您的页面进入检查模式，它会动态地将css添加到悬停在其上的每个元素，因此它看起来与Chrome类似。当您在检查模式中单击元素时，您可以按照自己的方式处理它。这样，您只需为每个元素添加一个悬停和一个单击处理程序，因此只触发一次事件。

如何在mouseover事件处理程序中创建click事件处理程序？

2 个答案: