Какие события мыши/касания следует использовать, чтобы элемент div менял цвет при наведении на него курсора?

Я хотел бы знать, какие события мыши мне нужно использовать для задачи ниже.

При наведении курсора на элемент div он меняет цвет.

Под перетаскиванием я подразумеваю, что кнопка мыши была нажата один раз (и не отпущена) где-то за пределами div, а затем курсор был перемещен над div (кнопка мыши не была отпущена ни разу во время этот процесс).

Div не должен реагировать на наведение мыши. Кнопка мыши должна быть нажата, а затем перетащена на div, чтобы активировать изменение в div.

Мне также интересно, есть ли какие-либо эквивалентные события для сенсорных устройств?


javascript mouseevent touch-event
person TryHarder    schedule 25.07.2011    source источник
comment
Не перетаскивание, а просто щелчок и перетаскивание (представьте, что кто-то рисует линию — когда линия проходит над div, div меняется). Что касается скрытого div, это не обязательно должен быть скрытый div. Я отредактировал свой пост выше. Извините за путаницу.   -  person TryHarder    schedule 25.07.2011

Ответы (2)


arrow_upward
1
arrow_downward

Если я правильно понимаю, вы можете сделать следующее:

  • установить глобальную переменную "mousedown" в false
  • используйте событие «onmousedown», чтобы установить для «mousedown» значение true
  • используйте событие onmouseover вашего div, чтобы запустить функцию, в которой вы сначала проверяете, верно ли mousedown, и если это так, сделайте div видимым
  • используйте событие «onmouseup» на своей странице, чтобы снова установить для «mousedown» значение false

Для любого javascript, связанного с сенсорным событием, вы должны взглянуть на Sencha Touch.

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

Вот хорошая статья об этом:

http://www.html5rocks.com/en/mobile/touch.html

person Chris    schedule 25.07.2011
comment
Спасибо. Я думаю, это то, что я искал. Re Sencha Touch, я пытаюсь избежать фреймворков и просто реализовать простое решение JavaScript (я знаю, что это, вероятно, непросто, но я хотел бы сначала попробовать этот путь). - person TryHarder; 25.07.2011
comment
Я добавил в ответ некоторую информацию о нативных сенсорных возможностях. - person Chris; 25.07.2011

arrow_upward
1
arrow_downward

Я бы порекомендовал для этого JQueryUI — у него есть несколько события перетаскивания встроены. Событие перетаскивания для сенсорных устройств называется touchmove

person AlienWebguy    schedule 25.07.2011
comment
Спасибо за ваш ответ. На данный момент я стараюсь избегать JQuery. Я просто хочу понять, как я могу написать это, используя простой JavaScript. Извините, что не указал это в вопросе выше. - person TryHarder; 25.07.2011