Question

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元素。

Answer 1

您似乎在目标元素上移动鼠标的每一个“tick”附加一个新的事件处理程序。这可以非常迅速地导致成百上千的事件处理程序。这是Vanilla JavaScript中的坏消息;在jQuery中它是一个核武器。

然后，每当鼠标移动到目标元素上时，您就会添加一个新的click事件处理程序，并设置另一个核心。

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

Answer 2

问题在于您的事件注册模型，每当鼠标移动到指定元素上时，您都可以向指定元素注册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
});

演示：Fiddle

Answer 3

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

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

jQuery - mousemove崩溃我的Firefox

3 个答案: