VPF::События колёсика мыши - Форум программистов

kuksha

Дата 1.12.2011, 00:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

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

Код


<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()">

Это сообщение отредактировал(а) kuksha - 1.12.2011, 00:18

kuksha

Дата 2.12.2011, 17:37 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

нет, не получается у меня подавить прокрутку страницы после прокручивания колёсика над картинкой...
Нарыл такую функцию:

Код


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);

Не работает... При выходе из картинки при первом же повороте колеса мыши идёт отработка прокрутки колёсика над картинкой.
Помогите пожалуйста.

Amphiluke

Дата 2.12.2011, 17:45 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

kuksha, можете выложить весь код странички, на которой демонстрировалась бы проблема?

Добавлено через 6 минут и 30 секунд
Вот отрыл свой старый пост, там показано, как отменяется событие прокрутки колеса.

kuksha

Дата 2.12.2011, 18:32 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

Вот тут:
http://info-7.ru/Astro/nebo_segodnya_geo.php?zero=1
Колёсико крутить над той картинкой, которая карта неба. Соответственно код в исходнике страницы...

О, не заметил ссылку - спасибо, приеду домой посмотрю/попробую.

Это сообщение отредактировал(а) kuksha - 2.12.2011, 18:34

Amphiluke

Дата 2.12.2011, 18:46 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Пока еще сильно в код не всматривался, но, вроде, очевидно же: вы прослушиваете событие вращения колеса не на уровне самой картинки, а аж на уровне объекта 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;

Добавлено через 10 минут и 11 секунд
Всмотрелся немного дальше в вашу страничку… 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

kuksha

Дата 2.12.2011, 20:06 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

Amphiluke, я неплохо знаю перл и пхп, но с джава скриптами никогда не работал. Тыркаюсь сейчас как слепой котёнок smile

Так что неудивительно, что наколбасил... Спасибо за замечания.
Сейчас буду разбираться...

kuksha

Дата 2.12.2011, 21:11 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

То есть в итоге так?

Код


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, благодарю!

Теперь буду искать как менять только одну картинку, без перезагрузки страницы...

kuksha

Дата 5.12.2011, 11:18 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

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

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

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

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

Это сообщение отредактировал(а) kuksha - 5.12.2011, 11:21

Amphiluke

Дата 5.12.2011, 16:10 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Замечание касается ненужного обработчика события 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

)

Вот отрыл свой старый пост, там показано, как отменяется событие прокрутки колеса.

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

Код


if (event.preventDefault) {
    event.preventDefault();
} else {
    event.returnValue = false;
}

kuksha

Дата 6.12.2011, 00:23 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

Amphiluke, Спасибо! smile

Сделал: http://info-7.ru/Astro/nebo_segodnya_geo8.php?zero=1
Стало гораздо приятнее smile

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

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

Amphiluke

Дата 6.12.2011, 21:59 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Конечно, можно. Навскидку, это можно реализовать достаточно просто. Когда вы меняете 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
}

Это сообщение отредактировал(а) Amphiluke - 6.12.2011, 22:07

kuksha

Дата 6.12.2011, 22:44 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

Amphiluke, спасибо огромнейшее - просто блеск как работает! Поставил на сайт.
Сайтик у меня хоть и маленький, но с удовольствием напишу строчку благодарности под звёздной картой на этой страничке:
http://info-7.ru/Astro/nebo_segodnya_geo.php?zero=1
Только знать бы кому - не по псевдониму же благодарить smile

Если конечно это нужно...

Amphiluke

Дата 7.12.2011, 14:02 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Нет, спасибо. Не стóит. You are welcome, как говорится. smile

kuksha

Дата 7.12.2011, 20:18 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 154
Регистрация: 15.6.2011

Репутация: нет
Всего: нет

Понятно, но если что - только свистните...
Задумок ещё куча, так что я тут ещё не раз и не два появлюсь. smile

Удачи!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »