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

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

流程如下：

1. 单击“开始检查”按钮。
2. 你将鼠标hover在必要的元素上
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); }); }); }; 

问题是 ：每次我将鼠标hover在某个元素上时，都会附加click事件处理程序。 因此， 如果我将鼠标hover在p元素上5次，然后单击它 – 我将看到5个console.log而不是1 。

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

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

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

Answer 1

您是否尝试在mouseover之外移动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); }); }; 

DEMO

Answer 2

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