Определить, находится ли мышь над элементом при загрузке страницы с помощью Javascript

Question

У меня есть изображение, которое я хочу вызвать при определенных режимах работы мыши, когда у меня есть мышь, у меня есть метод mouseover и mouseout, но если вам случается навести курсор мыши на изображение при загрузке страницы, метод mouseover никогда не срабатывает пока вы не оставите изображение и не вернетесь к нему.

Есть ли способ определить, находится ли мышь над элементом на лету, при этом мышь не должна находиться вне элемента, а затем проходить над элементом, чтобы вызвать событие наведения курсора JS? Например, есть ли в Javascript функция типа document.getElementById ("бла"). MouseIsOver ()?

Answer 1

Я считаю, что это возможно без каких-либо действий со стороны пользователя. Когда ваша страница загрузится, привяжите событие mouseover к своему изображению и скройте свое изображение (т. Е. Используя CSS display:none). Используйте setTimeout(), чтобы показать его снова через несколько миллисекунд (10 должно быть достаточно). Даже должен быть уволен.

Если вы не хотите вызывать эффект «щелчка» на своем изображении, вы можете вместо этого попробовать использовать какой-то временный элемент, прикрепить к нему событие и делегировать событие на ваше изображение.

Понятия не имею, является ли это кросс-браузерным решением, но оно работало с моей консоли Firefox 3.0;)

Answer 2

Вы можете использовать событие mousemove. Это будет срабатывать каждый раз, когда пользователь перемещает мышь; поэтому единственный случай, когда триггер не срабатывает, - это если пользователь вообще не двигает мышь, что должно быть редко.

Единственная проблема, связанная с этим, заключается в том, что событие будет срабатывать каждый раз, когда мышь будет перемещаться по вашему изображению, поэтому вы получите МНОГО этих событий, находясь над компонентом. Что вам, вероятно, понадобится сделать, это реализовать какой-нибудь флаг в вашем методе при возникновении события. Вы включаете флаг, когда событие запускается впервые, и выключаете его, когда выходите из компонента.

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

<img src="blah.png" onmousemove="JavaScript:triggerOn(event)" onmouseout="JavaScript:triggerOff(event)"/>


...

<script type='text/javascript'>

var TriggerActive = false;

function triggerOn(e){
  e = e||window.e;
  if( !TriggerActive){
    TriggerActive = true;
    // Do something
  } else {
    // Trigger already fired, ignore this event.
  }
}

function triggerOff(e){
  e = e||window.e;
  if(TriggerActive) 
    TriggerActive = false;
}

</script>

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

Answer 3

Невозможно получить координаты мыши помимо прослушивания событий мыши, а именно mousemove, mouseover и т. Д. Однако эти события очень чувствительны в том смысле, что перемещения курсора всего на один пиксель достаточно активируйте их, поэтому наведение курсора на изображение, в то же время совершенно неподвижное, должно быть несколько необычным.