jQuery - mousemove crashing my firefox

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

Проблема заключалась в том, что ваша модель регистрации событий вы регистрировали 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 2

Кажется, что вы прикрепляете новый обработчик событий каждый «галочку» мыши, перемещающийся по целевым элементам. Это может очень быстро привести к сотням, тысячам обработчиков событий. Это плохая новость в Vanilla JavaScript; в jQuery это ядерное оружие.

Затем вы добавляете новый обработчик событий click каждый раз, когда мышь перемещается по целевому элементу, устанавливая другое ядерное оружие.

Затем вы нажимаете несколько раз ... и BOOM!

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