3

Здравствуйте!

Подскажите, пожалуйста, как с помощью Javascript сделать так, что бы при попадании мыши в определенную область - срабатывала callback функция?

В jQuery есть mouseenter/leave, всё хорошо, но она срабатывает, когда начинается движение. А если мышь не двигается, то не сработает.

Например, я навел мышь на div блок номер 1. Я нажал кнопку удаления этого блока номер 1 и на его место встал блок №2 - при этом координаты курсора мыши не изменились. Callback функция не сработает, если использовать mouseenter/leave, потому что не было движения мыши, но если я начну движение, то сработает.

Задача заключается в том, чтобы callback функция срабатывала в любом случае, если курсор мыши находится над определенным div блоком, независимо есть движение или нет.

Подскажите, как это можно реализовать?

Спасибо!

2 ответа 2

3

Большенькая вышла функция... думал меньше будет :)

$(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('<div class="num2">0</div>');
  });
  $(document).on('click', 'div.num2', function() {
    $(this).remove();
    $('body').append('<div class="num1">0</div>');
  });
});
div {width:200px;height:200px;}
.num1 {background-color: red}
.num2 {background-color: green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="num1">0</div>

2
  • спасибо за ответ! А как быть если на странице не одна картинка, а, например 20? Ресурсоемка ли эта функция?
    – Pavel
    5 янв 2017 в 19:21
  • @Pavel, по идее нет. Но я бы её немного переделал и сделал более лёгкое пользование
    – Yuri
    5 янв 2017 в 19:25
0

В JQuery это можно сделать при помощи .hover() К примеру:

$("#myelement").hover(function(e){ console.debug("works!"); //Ваш код });

https://api.jquery.com/hover/

1
  • функция срабатывает в момент изменения координат курсора мыши. А если координаты не меняются, то не срабатывает.
    – Pavel
    5 янв 2017 в 17:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.