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

Question

我正在尝试构建一种元素检查器（类似于Chrome / FF）。

流程如下：

1. 点击“开始检查”按钮。
2. 将鼠标悬停在必要的元素上。
3. 单击该元素。
4. 您应该在控制台中看到该元素。

JSFiddle示例

这是代码：

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

问题是: 每次我悬停在某个元素上时，都会将点击事件处理程序附加到它上面。因此，如果我在

元素上悬停5次，然后单击它 - 我将看到5个console.log而不是1个。

我尝试使用mouseenter/mouseleave实现它，但遇到了问题，每个元素只能悬停一次 - 另一个JSFiddle示例

那么我该如何改进代码，使无论我悬停在元素上多少次，它都只有一个点击处理程序？

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

- eawer

---

将 click 处理程序移出 hover 函数。 - Selvakumar Arumugam

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

- Selvakumar Arumugam

Answer 2

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

- Jonathan