0 
jQuery('#test .track, :not(.btn)').mousemove(function(e){   
        var el = e.target;
        jQuery(el).mouseover(function (e) {
            e.stopPropagation();
            jQuery(this).addClass('highlight');
            jQuery(this).click(function(){
                jQuery('.active').removeClass('active');
                show_data(this); // a small function for showing this class, css
            })
        }).mouseout(function () {
            jQuery(this).removeClass('highlight');
        });

});

连续单击时，此代码会使我的 Firefox 崩溃。我正在使用此代码突出显示鼠标下的当前 DOM 元素。

4

3 回答 3

2

您似乎在鼠标在目标元素上移动的每个“滴答声”都附加了一个新的事件处理程序。这可以极快地导致成百上千的事件处理程序。这在Vanilla JavaScript中是个坏消息；在 jQuery 中它是一个核弹。

click然后，每次鼠标移到目标元素上时，您都将添加一个新的事件处理程序，从而设置另一个 nuke。

然后你点击几次......然后BOOM！

于 2013-07-23T03:50:55.263 回答
1

问题是您的事件注册模型，当鼠标移到指定元素上时，您在其中注册mouseover和处理程序，导致可能有数千个事件处理程序被注册到每个元素。mouseout这可能会导致浏览器暂停 js 执行。

尝试

jQuery('#test .track, :not(.btn)').mouseover(function (e) {
    e.stopPropagation();
    jQuery(this).addClass('highlight');
}).mouseout(function () {
    jQuery(this).removeClass('highlight');
}).click(function(){
    jQuery('.active').removeClass('active');
    show_data(this); // a small function for showing this class, css
});

演示：小提琴

于 2013-07-23T04:00:48.647 回答
0

如果要根据鼠标坐标获取元素。 

var element = $(selector)
function handler(e){     
   var x = event.clientX, y = event.clientY,
   var elementMouseIsOver = document.elementFromPoint(x, y);
   $(elementMouseIsOver).addClass('yourClass');
}
element.on('click', handler);
element.on('mouseover', handler);

如果要基于悬停获取元素

var element = document.querySelectorAll(':hover');

如果您想在悬停时应用样式并在鼠标移出时删除

$(ele).hover(function(){
   // Hover Event
   $(this).addClass('xyz');
}, function(){
   // Hover done Event
   $(this).removeClass('xyz');
});
于 2013-07-23T04:11:24.327 回答