События колёсика мыши

 
0
 
JavaScript
ava
kuksha | 01.12.2011, 01:10
Здравствуйте.
Нужно определить событие прокрутки мыши над картинкой и направление прокрутки, в зависимости от которого выполнить какие-то действия, ну например перейти на один сайт или на другой.
Нашёл приведённый ниже код. Работает.
Но, это для всей страницы, а мне надо чтобы он только над картинкой работал.


<html>
<head>
<title>Пример</title>

<script language="javascript">
window.onload = function()
{
//adding the event listerner for Mozilla
if(window.addEventListener)
document.addEventListener('DOMMouseScroll', moveObject, false);

//for IE/OPERA etc
document.onmousewheel = moveObject;
}
function moveObject(event)
{
var delta = 0;

if (!event) event = window.event;

// normalize the delta
if (event.wheelDelta) {

// IE and Opera
delta = event.wheelDelta / 60;

} else if (event.detail) {

// W3C
delta = -event.detail / 2;
}

if (delta>0)
{
location="http://ya.ru";
}
else
{
location="http://rambler.ru";
}

}
</script>
</head>
<body>
<img id="kartinka" srс=kartinka.jpg>
</body>
</html>


Извините, получилось!
<img id="kartinka" srv=kartinka.jpg onmouseover="prokrutka()">
Kommentare (13)
ava
kuksha | 02.12.2011, 17:37 #
нет, не получается у меня подавить прокрутку страницы после прокручивания колёсика над картинкой...
Нарыл такую функцию:

function cancelEvent(e) {
e = e ? e : window.event;
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.preventDefault) {
e.preventDefault();
}
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}

Написано, что её надо вызвать в конце обработчика прокрутки мыши командой

return cancelEvent(event);


Не работает... При выходе из картинки при первом же повороте колеса мыши идёт отработка прокрутки колёсика над картинкой.
Помогите пожалуйста.
ava
Amphiluke | 02.12.2011, 17:45 #
kuksha, можете выложить весь код странички, на которой демонстрировалась бы проблема?

später ergänzt:
Вот отрыл свой старый пост, там показано, как отменяется событие прокрутки колеса.
ava
kuksha | 02.12.2011, 18:32 #
Вот тут:
http://info-7.ru/Astro/nebo_segodnya_geo.php?zero=1
Колёсико крутить над той картинкой, которая карта неба. Соответственно код в исходнике страницы...

О, не заметил ссылку - спасибо, приеду домой посмотрю/попробую.
ava
Amphiluke | 02.12.2011, 18:46 #
Пока еще сильно в код не всматривался, но, вроде, очевидно же: вы прослушиваете событие вращения колеса не на уровне самой картинки, а аж на уровне объекта document.
Цитата (kuksha)



  if(window.addEventListener)
  document.addEventListener('DOMMouseScroll', moveObject, false);
  //for IE/OPERA etc
  document.onmousewheel = moveObject;




Зачем? Обработчик нужно на картинку и вешать по логике.
Что-то типа

if(window.addEventListener)
document.getElementById('karta').addEventListener('DOMMouseScroll', moveObject, false);
//for IE/OPERA etc
document.getElementById('karta').onmousewheel = moveObject;



später ergänzt:
Всмотрелся немного дальше в вашу страничку… smile
Совершенно непонятно, с какой целью при каждом наведении указателя мыши на картинку добавляется еще и еще заново один и тот же обработчик события вращения колеса.
Цитата




function prokrutka(event)

{
  //adding the event listerner for Mozilla
  if(window.addEventListener)
  document.getElementById('karta').addEventListener('DOMMouseScroll', moveObject, false);
  //for IE/OPERA etc
  document.getElementById('karta').onmousewheel = moveObject;

}





<img id='karta' src="..." onmouseover="prokrutka(event);">




Достаточно сделать это один-единственный раз после загрузки страницы. smile
ava
kuksha | 02.12.2011, 20:06 #
Amphiluke, я неплохо знаю перл и пхп, но с джава скриптами никогда не работал. Тыркаюсь сейчас как слепой котёнок smile Так что неудивительно, что наколбасил... Спасибо за замечания.
Сейчас буду разбираться...
ava
kuksha | 02.12.2011, 21:11 #
То есть в итоге так?

window.onload = function prokrutka(event)
{
//adding the event listerner for Mozilla
if(window.addEventListener)
document.getElementById('karta').addEventListener('DOMMouseScroll', moveObject, false);
//for IE/OPERA etc
document.getElementById('karta').onmousewheel = moveObject;
}


Паразитная прокрутка исчезла. Ура! smile
Amphiluke, благодарю!

Теперь буду искать как менять только одну картинку, без перезагрузки страницы...
ava
kuksha | 05.12.2011, 11:18 #
Сейчас добавил перерисовку изображения без обновления всей страницы и почти незаметный до этого глюк проявился во всей красе:
при прокручивании колёсика мыши для изменения масштаба карты, сначала отрабатывается прокрутка страницы, а уже потом происходит перерисовка изображения. То есть страница постоянно ездит вверх-вниз.

Вот что в черновой версии сейчас:
http://info-7.ru/Astro/nebo_segodnya_geo8.php?zero=1
Собственно код там же, сюда наверное нет смысла писать, поскольку кроме отрисовки картинки ничего не добавилось, а страница и раньше смещалась после прокрутки точно так же. Просто поскольку перерисовывалась вся страница, я на это не обращал внимания.

Что я не так сделал?
Amphiluke, к своему стыду я не понял вашего замечания "с какой целью при каждом наведении указателя мыши на картинку добавляется еще и еще заново один и тот же обработчик события вращения колеса". Может в этом дело? Как правильно?

Кстати, при попытке увеличить карту при достигнутом максимальном увеличении 3, прокрутки не происходит, поскольку границы масштабирования жёстко заданы и я просто вылетаю из функции по return. То же самое при увеличении в 1 крат.

ava
Amphiluke | 05.12.2011, 16:10 #
Замечание касается ненужного обработчика события onmouseover у картинки.
Цитата (kuksha)




onmouseover="prokrutka(event);"




Этот код фактически означает следующее: «всякий раз, когда пользователь наводит указатель мыши на картинку, добавить еще один обработчик события вращения колеса». Именно этим занималась ваша функция prokrutka. Сейчас, похоже, вы это дело «исправили», сделав добавление слушателей по событию onload. Но атрибут onmouseover у вас так и остался. И сейчас стоит, генерируя ошибку JavaScript о неизвестном идентификаторе «prokrutka».

Кстати.
Цитата (kuksha)




window.onload = function prokrutka(event)

{
  //adding the event listerner for Mozilla
  if(window.addEventListener)
  document.getElementById('karta').addEventListener('DOMMouseScroll', moveObject, false);
  //for IE/OPERA etc
  document.getElementById('karta').onmousewheel = moveObject;

}




Не нужно давать имя функции, которая используется как анонимная, т.е. как функциональный литерал. Хотя синтаксис JavaScript это и позволяет, фактически это имя «prokrutka» не будет доступно нигде за пределами самой функции. Так что предлагаю анонимную функцию всё-таки «разыменовать» smile Неиспользуемый аргумент тоже можно опустить

window.onload = function()
{
//adding the event listerner for Mozilla
if(window.addEventListener)
document.getElementById('karta').addEventListener('DOMMouseScroll', moveObject, false);
//for IE/OPERA etc
document.getElementById('karta').onmousewheel = moveObject;
}


Теперь, наконец, по поводу прокрутки страницы при вращении колеса над картинкой. Мы с вами об этом уже говорили.
Цитата (Amphiluke @ 2.12.2011, 21:45 findReferencedText)
Вот отрыл свой старый пост, там показано, как отменяется событие прокрутки колеса.

Т.е. это решается стандартно — отменой действия по умолчанию. В конце вашей функции (точнее, после кода с заменой картинки el.src = ...) вствьте следующий код:


if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
ava
kuksha | 06.12.2011, 00:23 #
Amphiluke, Спасибо! smile
Сделал: http://info-7.ru/Astro/nebo_segodnya_geo8.php?zero=1
Стало гораздо приятнее smile

Обнаружилась ещё вот такая неприятность:
Если колесо крутить медленно, то всё нормально.
Но, если крутануть сильнее, то данные пересчитываются на несколько шагов вперёд, не дожидаясь отрисовки очередного увеличенного/уменьшенного куска карты на каждом шаге. Как результат - расчитываются неверные координаты и пользователь оказывается там, куда совсем не хотел...

Можно ли сделать такую заглушку, чтобы новая отработка не начиналась, пока не нарисуется очередная картинка?



ava
Amphiluke | 06.12.2011, 21:59 #
Конечно, можно. Навскидку, это можно реализовать достаточно просто. Когда вы меняете src картинки, можно установить какой-нибудь флаг (назовем его ready), состояние которого проверять всякий раз при заходе в обработчик события вращения колеса. Если флаг, допустим, false, то ждать, если true, можно вновь делать обычную обработку, менять вновь src. Сигнализировать окончание загрузки картинки можно установкой флага ready в значение true внутри обработчика события onload картинки.
Итого, может получиться примерно (!) следующее

window.onload = function ()
{
var el = document.getElementById('karta');
moveObject.ready = true; // после загрузки страницы картинка тоже уже загружена. Флаг — true
el.onload = function() { moveObject.ready = true; } // после завершения загрузки картинки устанавливать флаг в true
//adding the event listerner for Mozilla
if(window.addEventListener)
document.getElementById('karta').addEventListener('DOMMouseScroll', moveObject, false);
//for IE/OPERA etc
document.getElementById('karta').onmousewheel = moveObject;
}


Сам обработчик станет примерно таким:

function moveObject(event)
{
if (event.preventDefault) { // перетащим сюда отмену действия по умолчанию
event.preventDefault();
} else {
event.returnValue = false;
}
if (!arguments.callee.ready) return; // Если флаг false, значит картинка еще грузится. Выходим

// ......................................
// тут всё остается, как было
// ......................................

var el = document.getElementById('karta');
el.src = 'nebo.php?hershel=&lat=55.755786&lng=37.617633&messier=CHECKED&cald=CHECKED&zv_m=4&zv_nazv=CHECKED&zv_nazv_m=2&lin_sozv=&krat='+
krat+'&CentrX='+CentrX+'&CentrY='+CentrY;
arguments.callee.ready = false; // сразу после изменения src картинки устанавливаем флаг в false
}

ava
kuksha | 06.12.2011, 22:44 #
Amphiluke, спасибо огромнейшее - просто блеск как работает! Поставил на сайт.
Сайтик у меня хоть и маленький, но с удовольствием напишу строчку благодарности под звёздной картой на этой страничке:
http://info-7.ru/Astro/nebo_segodnya_geo.php?zero=1
Только знать бы кому - не по псевдониму же благодарить smile
Если конечно это нужно...
ava
Amphiluke | 07.12.2011, 14:02 #
Нет, спасибо. Не стóит. You are welcome, как говорится. smile
ava
kuksha | 07.12.2011, 20:18 #
Понятно, но если что - только свистните...
Задумок ещё куча, так что я тут ещё не раз и не два появлюсь. smile
Удачи!
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden