Страницы

Поиск по вопросам

вторник, 9 июля 2019 г.

Javascript: Если курсор мыши находится над элементом, как вызвать функцию?

Здравствуйте!
Подскажите, пожалуйста, как с помощью Javascript сделать так, что бы при попадании мыши в определенную область - срабатывала callback функция?
В jQuery есть mouseenter/leave, всё хорошо, но она срабатывает, когда начинается движение. А если мышь не двигается, то не сработает.
Например, я навел мышь на div блок номер 1. Я нажал кнопку удаления этого блока номер 1 и на его место встал блок №2 - при этом координаты курсора мыши не изменились. Callback функция не сработает, если использовать mouseenter/leave, потому что не было движения мыши, но если я начну движение, то сработает.
Задача заключается в том, чтобы callback функция срабатывала в любом случае, если курсор мыши находится над определенным div блоком, независимо есть движение или нет.
Подскажите, как это можно реализовать?
Спасибо!


Ответ

Большенькая вышла функция... думал меньше будет :)
$(function(e) { var func = function(event) { var elem = 'div', p = {left: $(elem).offset().left, top: $(elem).offset().top, right: $(elem).offset().left + $(elem).outerWidth(), bottom: $(elem).offset().top + $(elem).outerHeight()}; if(event.clientX >= p.left && event.clientX <= p.right && event.clientY >= p.top && event.clientY <= p.bottom){ $(elem).html(1); }else{ $(elem).html(0); }; }; $(window).mousemove(function(event) { func(event); e = event; }); setInterval(function() { func(e); }, 300); //Для проверки: $(document).on('click', 'div.num1', function() { $(this).remove(); $('body').append('

0
'); }); $(document).on('click', 'div.num2', function() { $(this).remove(); $('body').append('
0
'); }); }); div {width:200px;height:200px;} .num1 {background-color: red} .num2 {background-color: green}
0

Комментариев нет:

Отправить комментарий