Статья будет совсем короткой, она даст информацию по методу preventDefault а также о том, как разобрать происходящее событие в JavaScript и что-нибудь с ним сделать. Все функции, связанные с действиями пользователя на клавиатуре или движениями мыши можно отследить. Например, за отслеживание нажатия на клавиатуре кнопки отвечает функция .keypress() (здесь и далее все функции будут только из jQuery). В первой части статьи я рассмотрю предотвращение события. Итак, например, если у нас есть ссылка, по нажатию на которую что-то должно произойти, например, уже не раз упоминавшееся действие «положить товар в корзину». Итак, чтобы предотвратить переход по ссылке достаточно на нее «повесить» обработчик:
<script> $(function() { $('a').click(function(event) { event.preventDefault() }) }) </script>
Обратите внимание, что в аргумент анонимной функции внутри обработчика click() передается переменная event, которая содержит в себе объект события. И вот именно метод preventDefault() перехватывает произошедшее событие и предотвращает его. Таким же образом можно перехватить любое событие происходящее, например, при нажатии кнопки типа submit в html-форме и тому подобное. Если интересно, можно вывести происходящее событие в консоль и посмотреть, какие переменные и методы имеются в его распоряжении. Получится что-то вроде этого:
1. altKey: false 2. bubbles: true 3. button: 0 4. buttons: 0 5. cancelable: true 6. changedTouches: undefined 7. char: undefined 8. charCode: undefined 9. clientX: 63 10. clientY: 9 11. code: undefined 12. ctrlKey: false 13. currentTarget: a 14. data: null 15. …
Ну и много чего еще дальше. Некоторые из этих атрибутов можно использовать для своих нужд. Фантазия тут не ограничена, можете придумывать любые фишки с использованием этих атрибутов. А теперь попробуем отследить нажатие конкретных клавиш на клавиатуре. Здесь нам уже не обязательно использовать функцию preventDefault(), хотя в некоторых случаях она тоже может понадобиться. Например, если вы хотите сделать простенькую JavaScript игру-бродилку, скорее всего вам понадобятся стрелки на клавиатуре, которые также исопльзуются для прокрутки страницы браузера. Приступим, напишем в странице следующий код, который просто выводит в консоль событие, которое происходит при нажатии клавиши клавиатуры:
<script> $(function() { $(window).keypress(function(event) { console.log(event) }) }); </script>
И в этом событии нам будет интересно две переменные: key и keyCode (обратиться к ним можно соответственно как event.key и event.keyCode). В свойстве key содержится то, что написано на кнопке, в keyCode – числовой код кнопки. Первый параметр зависит от раскладки клавиатуры, второй – нет. Интересно, что при нажатии на стрелки на клавиатуре ничего не происходит и соответственно, не выводится в консоль. На самом деле все просто – keypress() не перехватывает событие нажатия на служебные клавиши (такие как Ctrl, Shift и стрелки в т.ч.). Если посмотреть в документацию jQuery, то можно найти событие keydown(). Попробуем заменить на него keypress() в предыдущем примере и ситуация меняется, получаем при нажатии кнопок событие на нажатие любой кнопки. Теперь мы можем перехватить нажатия стрелок на клавиатуре и использовать их в своих целях. Например, можно сделать перемещение блока текста или картинки по странице при нажатии кнопок, или изменение размера шрифта текста и вообще, все что вам взбредет в голову. Если запустить код указанный ниже, что блок текста будет «ползать» по странице по нажатию на стрелку.
<script> $(function() { $(window).keydown(function(event) { event.preventDefault() var mvDiv = $('.js-move') if(event.key == 'ArrowUp') mvDiv.css({top: mvDiv.position().top - 5}) if(event.key == 'ArrowDown') mvDiv.css({top: mvDiv.position().top + 5}) if(event.key == 'ArrowLeft') mvDiv.css({left: mvDiv.position().left - 5}) if(event.key == 'ArrowRight') mvDiv.css({left: mvDiv.position().left + 5}) }) }); </script> <div class="js-move" style="padding: 20px; border: 1px solid #ccc; position: absolute; top: 0px;left: 0px;"> А это ползающий текст </div>
Наверное, пока на этом можно закончить, потому что, еще раз повторюсь, применение описанных в этой страниц методов зависит только от вашей фантазии.
© 2010-2023 При использовании материалов ссылка на сайт www.webchaynik.ru обязательна