<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

События на мобильных устройствах

События на мобильных устройствах

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

Какие вообще события существуют для мобильных браузеров? Всего их шесть и все они начинаются со слова touch.

touchstart

Событие touchstart срабатывает при касании пальца по элементу на экране.

touchmove

Каждый раз, когда палец начинается двигаться по элементу, выполняется событие touchmove.

touchend

Как только палец оторвался от элемента, выполняется событие touchend.

touchenter

Оно будет срабатывать, когда мы проводим пальцем по экрану и заходим на область с элементом, на который повешено событие.

touchleave

Событие touchleave оказывает противоположное воздействие - это когда палец покидает область с элементом.

touchcancel

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

Практика

Установим обработчик события DOMContentLoaded, который проверяет готовность всех DOM узлов для обработки JavaScript-ом. Весь последующий код будет писаться внутри данного обработчика.

window.addEventListener('DOMContentLoaded'), () => {
    ...
});

Создадим на странице простой блок для взаимодействия.

// HTML код
<div class="box">
    Touch me!
</div>

// CSS код
.box {
    width: 200px;
    height: 150px;
    background-color: blue;
}


События на мобильных устройствах.

Получим элемент box для манипуляций через метод querySelector и установим на него слушатель addEventListener события touchstart. Затем передадим callback функцию, которая должна выполниться после отработки события.

window.addEventListener('DOMContentLoaded', () => {
    const box = document.querySelector('.box');
    box.addEventListener('touchstart', (e) => {
        e.preventDefault(); // отмена стандартного поведения браузера
        console.log('Работает!');
    });
});

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



События на мобильных устройствах.

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



События на мобильных устройствах.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.