我正在尝试构建一种元素检查器(类似于Chrome / FF)。
流程如下:
流程如下:
- 点击“开始检查”按钮。
- 将鼠标悬停在必要的元素上。
- 单击该元素。
- 您应该在控制台中看到该元素。
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示例
那么我该如何改进代码,使无论我悬停在元素上多少次,它都只有一个点击处理程序?
提前感谢,任何帮助将不胜感激!
click
处理程序移出hover
函数。 - Selvakumar Arumugam