Пример скрипта запрещения работы правой кнопки мыши


Содержание

Мышь: клики, кнопка, координаты

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/mouse-events-basics.

В этой главе мы глубже разберёмся со списком событий мыши, рассмотрим их общие свойства, а также те события, которые связаны с кликом.

Типы событий мыши

Условно можно разделить события на два типа: «простые» и «комплексные».

Простые события

Комплексные события

Комплексные можно составить из простых, поэтому в теории можно было бы обойтись вообще без них. Но они есть, и это хорошо, потому что с ними удобнее.

Порядок срабатывания событий

Одно действие может вызывать несколько событий.

Например, клик вызывает сначала mousedown при нажатии, а затем mouseup и click при отпускании кнопки.

В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке mousedown → mouseup → click .

Кликните по кнопке ниже и вы увидите, какие при этом происходят события. Попробуйте также двойной клик.

На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства which/button , по которым можно определить кнопку мыши. Мы их рассмотрим далее.

Каждое событие обрабатывается независимо.

Например, при клике события mouseup + click возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка mouseup , затем запускается click .

Получение информации о кнопке: which

При обработке событий, связанных с кликами мыши, бывает важно знать, какая кнопка нажата.

Для получения кнопки мыши в объекте event есть свойство which .

На практике оно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку мыши, либо oncontextmenu – только на правую.

Возможны следующие значения:

  • event.which == 1 – левая кнопка
  • event.which == 2 – средняя кнопка
  • event.which == 3 – правая кнопка

Это свойство не поддерживается IE8-, но его можно получить способом, описанным в конце главы.

Правый клик: oncontextmenu

Это событие срабатывает при клике правой кнопкой мыши:

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

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

В примере ниже встроенное меню показано не будет:

Модификаторы shift, alt, ctrl и meta

Во всех событиях мыши присутствует информация о нажатых клавишах-модификаторах.

Например, кнопка ниже сработает только на Alt+Shift+Клик:

На компьютерах под управлением Windows и Linux есть специальные клавиши Alt , Shift и Ctrl . На Mac есть ещё одна специальная клавиша: Cmd , которой соответствует свойство metaKey .

В большинстве случаев там, где под Windows/Linux используется Ctrl , на Mac используется Cmd . Там, где пользователь Windows нажимает Ctrl + Enter или Ctrl + A , пользователь Mac нажмёт Cmd + Enter или Cmd + A , и так далее, почти всегда Cmd вместо Ctrl .

Поэтому, если мы хотим поддерживать сочетание Ctrl +click или другие подобные, то под Mac имеет смысл использовать Cmd +click. Пользователям Mac это будет гораздо комфортнее.

Более того, даже если бы мы хотели бы заставить пользователей Mac использовать именно Ctrl +click – это было бы затруднительно. Дело в том, что обычный клик с зажатым Ctrl под Mac работает как правый клик и генерирует событие oncontextmenu , а вовсе не onclick , как под Windows/Linux.

Решение – чтобы пользователи обоих операционных систем работали с комфортом, в паре с ctrlKey нужно обязательно использовать metaKey .

В JS-коде это означает, что для удобства пользователей Mac нужно проверять if (event.ctrlKey || event.metaKey) .

Координаты в окне: clientX/Y

Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.

Пара свойств clientX/clientY содержит координаты курсора относительно текущего окна.

При этом, например, если ваше окно размером 500×500, а мышь находится в центре, тогда и clientX и clientY будут равны 250.

Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора clientX/clientY не изменятся, потому что они считаются относительно окна, а не документа.

Проведите мышью над полем ввода, чтобы увидеть clientX/clientY :

В той же системе координат работает и метод elem.getBoundingClientRect() , возвращающий координаты элемента, а также position:fixed .

Относительно документа: pageX/Y

Координаты курсора относительно документа находятся в свойствах pageX/pageY .

Так как эти координаты – относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора pageX/pageY изменятся на величину прокрутки, они привязаны к конкретной точке в документе.

В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.

Проведите мышью над полем ввода, чтобы увидеть pageX/pageY (кроме IE8-):

В той же системе координат работает position:absolute , если элемент позиционируется относительно документа.

Некоторые браузеры поддерживают свойства event.x/y , event.layerX/layerY .

Эти свойства устарели, они нестандартные и не добавляют ничего к описанным выше. Использовать их не стоит.

Особенности IE8-

Двойной клик

Все браузеры, кроме IE8-, генерируют dblclick в дополнение к другим событиям.

  • mousedown (нажал)
  • mouseup+click (отжал)
  • mousedown (нажал)
  • mouseup+click+dblclick (отжал).

IE8- на втором клике не генерирует mousedown и click .

  • mousedown (нажал)
  • mouseup+click (отжал)
  • (нажал второй раз, без события)
  • mouseup+dblclick (отжал).

Поэтому отловить двойной клик в IE8-, отслеживая только click , нельзя, ведь при втором нажатии его нет. Нужно именно событие dblclick .

Свойство which/button

В старых IE8- не поддерживалось свойство which , а вместо него использовалось свойство button , которое является 3-х битным числом, в котором каждому биту соответствует кнопка мыши. Бит установлен в 1, только если соответствующая кнопка нажата.

Чтобы его расшифровать – нужна побитовая операция & («битовое И»):

  • !!(button & 1) == true (1-й бит установлен), если нажата левая кнопка,
  • !!(button & 2) == true (2-й бит установлен), если нажата правая кнопка,
  • !!(button & 4) == true (3-й бит установлен), если нажата средняя кнопка.

Что интересно, при этом мы можем узнать, были ли две кнопки нажаты одновременно, в то время как стандартный which такой возможности не даёт. Так что, в некотором смысле, свойство button – более мощное.

Можно легко сделать функцию, которая будет ставить свойство which из button , если его нет:

Свойства pageX/pageY

В IE до версии 9 не поддерживаются свойства pageX/pageY , но их можно получить, прибавив к clientX/clientY величину прокрутки страницы.

Более подробно о её вычислении вы можете прочитать в разделе прокрутка страницы.

Мы же здесь приведём готовый вариант, который позволяет нам получить pageX/pageY для старых и совсем старых IE:

Итого

События мыши имеют следующие свойства:

  • Кнопка мыши: which (для IE8-: нужно ставить из button )
  • Элемент, вызвавший событие: target
  • Координаты, относительно окна: clientX/clientY
  • Координаты, относительно документа: pageX/pageY (для IE8-: нужно ставить по clientX/Y и прокрутке)
  • Если зажата спец. клавиша, то стоит соответствующее свойство: altKey , ctrlKey , shiftKey или metaKey (Mac).
  • Для поддержки Ctrl + click не забываем проверить if (e.metaKey || e.ctrlKey) , чтобы пользователи Mac тоже были довольны.

Задачи

Дерево: проверка клика на заголовке

Есть кликабельное JavaScript-дерево UL/LI (см. задачу Раскрывающееся дерево).

При клике на заголовке его список его детей скрывается-раскрывается. Выглядит это так: (кликайте на заголовки)

Однако, проблема в том, что скрытие-раскрытие происходит даже при клике вне заголовка, на пустом пространстве справа от него.

Как скрывать/раскрывать детей только при клике на заголовок?

В задаче Раскрывающееся дерево это решено так: заголовки завёрнуты в элементы SPAN и проверяются клики только на них. Представим на минуту, что мы не хотим оборачивать текст в SPAN , а хотим оставить как есть. Например, по соображениям производительности, если дерево и так очень большое, ведь оборачивание всех заголовков в SPAN увеличит количество DOM-узлов в 2 раза.

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

Исходный документ содержит кликабельное дерево.

P.S. Задача – скорее на сообразительность, однако подход может быть полезен в реальной жизни.

Подсказка

У события клика есть координаты. Проверьте по ним, попал ли клик на заголовок.

Самый глубокий узел на координатах можно получить вызовом document.elementFromPoint(clientX, clientY).


…Но заголовок является текстовым узлом, поэтому эта функция для него работать не будет. Однако это, всё же, можно обойти. Как?

Подсказка 2

Можно при клике на LI сделать временный SPAN и переместить в него текстовый узел-заголовок.

После этого проверить, попал ли клик в него и вернуть всё как было.

На шаге 3 текстовый узел вынимается обратно из SPAN , всё возвращается в исходное состояние.

Почему не нужно отключать клик правой кнопки мыши на сайте? (+альтернативные подходы)

Потрудившись как следует над написанием статьи или созданием иллюстрации, вполне вероятно, вы заходите предотвратить их «бездумное» распространение по сети без соблюдения авторских прав. Одним из вариантов защиты от воровства контента является использование специального JavaScript, который отключает правый клик мыши на сайте и, по желанию, предупреждает посетителя, что информация не подлежит копированию. Вопрос достаточно спорный, на самом деле, и сегодня я хочу рассмотреть точку зрения почему не следует этого делать. Вдохновился данной статьей, староватой, но все еще актуальной.

Это раздражает

Вы не осознаете, как часто применяете клик правой кнопкой мыши до тех пор, пока вам не запретят так делать. Во всплывающем меню, которое он открывает, на самом деле есть несколько действительно полезных функций: сохранение, просмотр кода страницы, вызов веб-инспектора, добавление задачи в Todoist и поддержка других приложений/программ.

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

Это бессмысленно

Многие новички думают будто внедрение специальных скриптов поможет им максимально защитить тексты/изображения, но все не так. Если кто-то твердо решил скачать ваш контент, то он сделает это независимо от наличия вызова контекстного меню. Вариантов хватает: можно увидеть исходный HTML код через пункт «Просмотр источника» (View Page Source) в главном меню или, нажав Ctrl+U, достать содержимое блога из кэша поисковика (в том числе картинки), записать потоковое видео и т.п.

Иногда запрет правого клика только укрепит решимость человека скопировать наполнение веб-проекта, т.к. метод привлечет нежелательное внимание (и в таком случае окажется контрпродуктивным).

Кстати, интересная деталь — убрать срабатывание правой кнопки на сайте можно только в браузерах с поддержкой JavaScript. То есть посетителю достаточно просто-напросто отключить JS в настройках Chrome, Firefox и т.п., чтобы полностью игнорировать вашу защиту.

Это мешает работе

Причем как разработчику, так и пользователю. Управление мышкой позволяет значительно ускорить веб-серфинг. В самом начале контекстного меню браузеров есть 3 пункта для навигации:

  • Back — возврат на предыдущий документ;
  • Forward — перейти на следующий веб-адрес (посещенный ранее);
  • Reload — перегрузить текущую страницу.

Кроме того, при клике правой кнопки мыши по ссылке у вас будет возможность выбрать как ее открыть: в новом табе, обычном или защищенном окне. Многие предпочитают запускать страницу в другой вкладке дабы не потерять содержимое текущей и повторно не загружать ее через кнопку «Назад».

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

Если говорить о веб-разработке, то очень часто приходится тестировать определенные правки в своих проектах через веб-инспектор. Если правый клик запрещен, у вас не получится открыть конкретный участок кода, что добавляет определенные неудобства.

Илон Маск рекомендует:  Комплексные селекторы

Это неприятно и оскорбительно

Данный аспект скорее психологический, но он тоже важен. На самом деле большинство пользователей сайта придут с целью найти нужную информацию или что-то купить (если это интернет-магазин). Уверен, по статистике очень мизерный процент аудитории имеет намерение украсть контент.

Пытаясь обезопасить себя от крохотной группы злоумышленников, вы фактически оскорбляете намного бОльшую часть людей, которые просто хотят работать привычным для себя образом. Отключение клика правой кнопкой мыши и постоянные напоминания, что содержимое защищено авторским правом, будет демонстрировать, что вы не доверяете своим посетителям. Тогда о каком обратном доверии от них может идти речь?

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

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

Альтернативы отключению правого клика мыши

Напоследок хотелось бы рассмотреть пару методов как уберечь контент без внедрения дополнительных JavaScript скриптов.

Для защиты изображений

1. Запрет правого клика только на картинках/фото

Этот подход подойдет специфическим типам сайтов, где графика занимает приоритетное значение: галереи, портфолио и т.п. В таком случае есть возможность уменьшить негатив пользователей за счет специального скрипта, срабатывающего только для картинок. Под систему WordPress попробуйте модуль Photection.

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

2. Добавление Watermark

Я когда-то писал про использование водяного знака на фото в блогах, где рассмотрел плюсы/минусы и реализацию. Это достаточно неплохой и безобидный вариант указать ваше авторство на графическом контенте. Лучший способ отпугнуть потенциального вора — поставить «визуальную метку» на самой интересной части изображения.

Полупрозрачные вотермарки в виде логотипа, адреса сайта или просто слово «образец» станут вполне очевидными знаками, что картинка не предназначено для свободного распространения и без отключения правой кнопку на сайте. Подобная тактика хорошо работает на сайтах, предлагающих художественные услуги, архивах фото и т.п. Плюс она не позволит указывать прямые ссылки (hotlinking).

3. Цифровые вотермарки

Цифровой водяной знак — практика встраивания информации о владельце в файл. Обычно это уникальный ID, ник или контактные автора. Данная инфа невидима для обычного пользователя, но ее можно просмотреть с помощью плагинов графических программ или специализированных декодеров.

Цифровая метка в каком-то смысле сильнее физической, потому что при взгляде на изображение непонятно, есть ли в нем дополнительная информация. И хотя такой подход не остановит вора, однако он значительно облегчит отслеживание вашей работы (а в некоторых случаях и ее производных). Теоретически, фишка пригодится при решении судебных споров.

4. Просмотр в окне

Если вы хотите продемонстрировать уровень детализации своих картинок, не выдавая слишком много контента «бесплатно», воспользуйтесь так называемый методом «окна». Представьте, что смотрите на фотку через небольшое отверстие в листе бумаги. Вы не сможете рассмотреть все изображение целиком, но увидите качество графики и ее детали. Такой прием встречается в реализации Java галерей, хотя, вероятно, проще (и быстрее) показывать обрезанную версию оригинала.

Защита HTML/контента

Скрипт отключения правового клика мыши — далеко не самый эффективный способ затруднить чтение исходного кода. Как уже говорилось выше, большинство вариантов используют JavaScript, поэтому, и если у посетителя он отключен, сайт становится уязвимым.

Есть три разных JavaScript решения для текущей задачи:

  • Закодировать оригинал и сделать его нечитаемым без расшифровки.
  • Поместить основную часть кода внутрь другого файла с помощью JavaScript include.
  • Открывать страницу в новом окне с отключенными меню (не рекомендуется).

Единственный способ усложнить любопытным юзерам расшифровку исходного HTML, не прибегая к JS и запрету правого клика, — удалить пустое пространство в веб-документе. Суть в том, чтобы превратить все содержимое в одну или несколько длинных строк. В таком случае есть вероятность, что злоумышленник при вызове «Просмотра источника» в браузере просто не захочет во все вникать из-за трудности прочтения.

В данной теме с защитой контента сайта есть несколько основных моментов:

  • Выбор метода зависит от того, что именно вы хотите уберечь и насколько это важно реализовать (например, только в изображениях). Помните, итоговый результат не должен вызывать дискомфорт у посетителей веб-проекта.
  • Если честно, не совсем понятно как альтернативные приемы влияют на восприятие страницы поисковыми системами. Особенно, если вы решили использовать хитрые способы кодирования или то же удаление пробелов. Обязательно удостоверьтесь, что при сканировании поисковикам информация считывается правильно.
  • Помните, тот, кто решил украсть принадлежащие вам тексты/картинки в любом случае найдет как это сделать. Отключение кликов правой кнопкой мыши или внедрение хитрых JavaScript скриптов позволяют убрать лишь часть проблем. Если злоумышленника заинтересовал конкретно ваш сайт, толку не будет — он может выбрать какой-то экзотический вариант с распознаванием скриншотов экрана, перепечаткой текста вручную и т.п.

К сожалению, единственный 100% метод защитить ваши данные — не выставлять их в интернет:) Запрет правого клика в большинстве случаев принесет лишь неудобство и раздражение для вашей аудитории.

А вы что думаете по этому поводу? Как именно и закрываете ли вообще контент от копирования?

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

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

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

Исправить положение и вернуть работоспособность правой клавиши мышки на сайте, где она заблокирована, можно очень быстро. Давайте рассмотрим действенное решение.

Разблокируем работу правой клавиши мышки на тех сайтах, где она заблокирована

Мы воспользуемся весьма и весьма популярным (более 85 тысяч пользователей) расширением, что создано для браузеров на основе Chromium: Google Chrome, Opera, Vivaldi, Яндекс Браузер, Microsoft Edge Chromium и так далее. Решение поистине универсальное.

    Установив расширение под названием «Включить правую кнопку мыши» в свой браузер с официальной страницы, будет отображена его кнопка в панели инструментов браузера.

Открыв сайт, на котором правая клавиша блокируется, следует навести мышку на добавленную расширением кнопку, нажать и во всплывшем меню выбрать пункт Enable Right Click.

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

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

  • Стоит рассказать и о двух других опциях, что находятся в меню, что демонстрируется при клике по кнопке:
    • Ultimate Mode – данной опцией необходимо воспользоваться тогда, когда вариант Enable Right Click не помогает. К счастью, таких сайтов очень мало, вы их можете и не встретить.
    • Disable JavaScript – данная опция пригодится в случае, если помимо правой кнопки мышки блокируется, к примеру, ещё и выделение текста. Выберите её, и проблема исчезнет.

    Ну вот мы и рассмотрели, как с лёгкостью вернуть работоспособность правой клавиши мышки там, где она была заблокирована. В этом вам поможет популярное расширение, которое можно установить в большинство существующих популярных браузеров.

    В свою очередь, Вы тоже можете нам очень помочь.

    Просто поделитесь статьей в социальных сетях с друзьями.

    Поделившись результатами труда автора, вы окажете неоценимую помощь как ему самому, так и сайту в целом. Спасибо!

    Если на сайте заблокирована правая кнопка мыши как включить

    Включить правую клавишу мыши, на сайтах которые ее блокируют (первый способ)
    Самый простой способ: если вы попадаете на сайт, где блокируют нажатие правой клавиши мыши, а вам это нужно — в адресную строку вставляем следующий код:
    javascript:vo > и нажимаем Enter. После данных действий правая клавиша снова станет активна
    Включить правую клавишу мыши с помощью расширения в браузере
    Если вам по каким-то причинам не хочется использовать код описанный
    выше — вы можете добавить расширение в ваш браузер.
    К примеру браузеру Google Chrome и Яндекс подойдет расширение RightToCopy, а для Mozilla Firefox Enable Right Click and Copy. Трудностей в установке данных дополнений у вас не должно возникнуть, по этому я не буду описывать инструкцию. Там нужно всего перейти по ссылке и нажать установить.
    Данных способов активировать правую клавишу мыши на сайтах, которые ее блокируют — вам должно хватить.

    Также интересно:

    Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом: +7(814)-233-22-11 Или:…

    1. В приложениях Microsoft Office Word и Excel панель инструментов по умолчанию находится в верхней части окна.…

    Как включить правую клавишу мыши на сайтах, которые блокируют ее

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

    Включить правую кнопку мыши на сайтах которые ее блокируют с помощью команды

    Самый простой способ: когда вы попадаете на сайт, где блокируют нажатие правой кнопки мыши, а вам это нужно — в адресную строку введите javascript:vo >

    Включить правую кнопку мыши с помощью расширения в браузере

    Если вам по каким-то причинам не хочется использовать код описанный выше — вы можете добавить расширение в ваш браузер.

    К примеру, браузеру Google Chrome и Яндекс подойдет расширение Enable Right Click, а для Mozilla Firefox Enable Right Click and Copy. Нужно перейти по ссылке и нажать на «Установить». После установки расширения и активации его в настройках, правая кнопка мыши станет активна на сайтах, которые ее отключили.

    На сегодня все, если вы знаете другие способы — пишите в комментариях! Удачи Вам ��

    Выразительный JavaScript: Обработка событий

    Содержание

    Вы властны над своим разумом, но не над внешними событиями. Когда вы поймёте это, вы обретёте силу.
    Марк Аврелий, «Медитации».

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

    Обработчики событий

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

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

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

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

    Функция addEventListener регистрирует свой второй аргумент как функцию, которая вызывается, когда описанное в первом аргументе событие случается.

    События и узлы DOM

    Каждый обработчик событий браузера зарегистрирован в контексте. Когда вы вызываете addEventListener, вы вызываете её как метод целого окна, потому что в браузере глобальная область видимости – это объект window. У каждого элемента DOM есть свой метод addEventListener, позволяющий слушать события от этого элемента.


    Пример назначает обработчик на DOM-узел кнопки. Нажатия на кнопку запускают обработчик, а нажатия на другие части документа – не запускают.

    Присвоение узлу атрибута onclick работает похоже. Но у узла есть только один атрибут onclick, значит таким способом вы можете зарегистрировать только один обработчик. Метод addEventListener позволяет добавлять любое количество обработчиков, так что вы не замените случайно уже назначенный ранее обработчик.

    Метод removeEventListener, вызванный с такими же аргументами, как addEventListener, удаляет обработчик.

    Чтобы это провернуть, мы даём функции имя (в данном случае, once), чтобы её можно было передать и в addEventListener, и в removeEventListener.

    Объекты событий

    В примерах мы проигнорировали тот факт, что функциям-обработчикам передаётся аргумент – объект события. В нём хранится дополнительная информация о событии. К примеру, если надо узнать, какая кнопка мыши была нажата, мы можем обратиться к свойству which этого объекта.

    Хранящаяся в объекте информация – разная для каждого типа событий. Мы обсудим эти типы позже. Свойство объекта type всегда содержит строку, описывающую событие (например, «click» или «mousedown»).

    Распространение (propagation)

    События, зарегистрированные на узлах, имеющих дочерние узлы, получат и некоторые события, случившиеся с их детьми. Если кликнуть на кнопку внутри параграфа, обработчики событий параграфа получат событие click.

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

    В любой момент обработчик может вызвать метод stopPropagation объекта события, чтобы «высшие» узлы не получили его. Это может быть полезным, когда у вас есть кнопка внутри другого кликабельного элемента, и вы не хотите, чтобы клики по кнопке активировали поведение внешнего элемента.

    Следующий пример регистрирует обработчики «mousedown» как на кнопке, так и на окружающем параграфе. При щелчке правой кнопкой обработчик кнопки вызывает stopPropagation, который предотвращает запуск обработчика параграфа. При клике другой кнопкой запускаются оба обработчика.

    У большинства объектов событий есть свойство target, ссылающееся на узел, который запустил обработку. Его можно использовать для проверки того, что вы не обрабатываете что-то, пришедшее с ненужного вам узла.

    Также возможно использовать свойство target, чтобы распространить обработку конкретного типа события. К примеру, если у вас есть узел, содержащий длинный список кнопок, было бы удобнее зарегистрировать один обработчик событий для узла, и в нём выяснять, нажали ли на кнопку – вместо того, чтобы регистрировать обработчики каждой кнопки по отдельности.

    Действия по умолчанию

    У многих событий есть действия по умолчанию. При клике на ссылку вы перейдёте по ней. При нажатии на стрелку вниз браузер прокрутит страницу вниз. По правому клику мыши вы увидите контекстное меню. И так далее.

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

    Это можно использовать для создания своих горячих клавиш или контекстного меню. Также это можно использовать для слома привычного пользователю интерфейса. К примеру, вот ссылка, по которой нельзя пройти.

    Не делайте так – если у вас нет очень серьёзной причины! Пользователям вашей страницы будет очень неудобно, когда они столкнутся с неожиданными результатами своих действий. В зависимости от браузера, некоторые события перехватить нельзя. В Chrome нельзя обрабатывать горячие клавиши закрытия текущей закладки (Ctrl-W or Command-W).

    События от кнопок клавиатуры

    При нажатии кнопки на клавиатуре браузер запускает событие «keydown». Когда она отпускается, происходит событие «keyup».

    Несмотря на название, «keydown» происходит не только тогда, когда на кнопку нажимают. Если нажать и удерживать кнопку, событие будет происходить каждый раз по приходу повторного сигнала от клавиши (key repeat). Если вам, к примеру, надо увеличивать скорость игрового персонажа, когда нажата кнопка со стрелкой, и уменьшать её, когда она отпущена – надо быть осторожным, чтобы не увеличить скорость каждый раз при повторе сигнала от кнопки, иначе скорость возрастёт очень сильно.

    В примере упомянуто свойство keyCode объекта события. Так вы можете узнать, какая именно кнопка нажата или отпущена. К сожалению, не всегда очевидно, как преобразовать числовые коды в нужную кнопку.

    Для цифр и букв код будет кодом символа Unicode, связанного с прописным символом, изображённым на кнопке. Метод строки charCodeAt даёт нам этот код.

    У других кнопок коды менее предсказуемы. Лучший способ их выяснить – экспериментальный. Зарегистрировать обработчик, который записывает коды клавиш, и нажать нужную кнопку.

    Кнопки-модификаторы типа Shift, Ctrl, Alt, и Meta (Command на Mac) создают события, как и нормальные кнопки. Но при разборе комбинаций клавиш можно выяснить, были ли нажаты модификаторы, через свойства shiftKey, ctrlKey, altKey, и metaKey событий клавиатуры и мыши.

    События «keydown» и «keyup» дают информацию о физическом нажатии кнопок. А если вам нужно узнать, какой текст вводит пользователь? Создавать его из нажатий кнопок – неудобно. Для этого существует событие «keypress», происходящее сразу после «keydown» (и повторяющееся вместе с «keydown», если клавишу продолжают удерживать), но только для тех кнопок, которые выдают символы. Свойство объекта события charCode содержит код, который можно интерпретировать как код Unicode. Мы можем использовать функцию String.fromCharCode для превращения кода в строку из одного символа.

    Источником события нажатия клавиши узел становится в зависимости от того, где находился фокус ввода во время нажатия. Обычные узлы не могут получить фокус ввода (если только вы не задали им атрибут tabindex), а такие, как ссылки, кнопки и поля форм – могут. Мы вернёся к полям ввода в главе 18. Когда ни у чего нет фокуса, в качестве целевого узла событий работает document.body

    Кнопки мыши

    Нажатие кнопки мыши тоже запускает несколько событий. События «mousedown» и «mouseup» похожи на «keydown» и «keyup», и запускаются, когда кнопка нажата и когда отпущена. События происходят у тех узлов DOM, над которыми находился курсор мыши.

    После события «mouseup» на узле, на который пришлись и нажатие, и отпускание кнопки, запускается событие “click”. Например, если я нажал кнопку над одним параграфом, потом передвинул мышь на другой параграф и отпустил кнопку, событие “click” случится у элемента, который содержал в себе оба эти параграфа.

    Если два щелка происходят достаточно быстро друг за другом, запускается событие «dblclick» (double-click), сразу после второго запуска “click”.

    Для получения точных координат места, где произошло событие мыши, обратитесь к свойствам pageX и pageY – они содержат координаты в пикселях относительно верхнего левого угла.

    В примере создана примитивная программа для рисования. Каждый раз по клику на документе он добавляет точку под вашим курсором. В главе 19 будет представлена менее примитивная программа для рисования.

    Свойства clientX и clientY похожи на pageX и pageY, но дают координаты относительно части документа, которая видна сейчас (если документ был прокручен). Это удобно при сравнении координат мыши с координатами, которые возвращает getBoundingClientRect – его возврат тоже связан с относительными координатами видимой части документа.

    Движение мыши

    Каждый раз при сдвиге курсора мыши запускается событие «mousemove». Его можно использовать для отслеживания позиции мыши. Обычно это нужно при создании некоей функциональности, связанной с перетаскиванием объектов мышью.

    К примеру, следующая программа отображает полоску и устанавливает обработку событий так, что движение влево и вправо уменьшает или увеличивает её ширину.

    Обратите внимание – обработчик «mousemove» зарегистрирован у всего окна. Даже если мышь уходит за пределы полоски, нам надо обновлять её размер и прекращать это, когда кнопку отпускают.

    Когда курсор попадает на узел и уходит с него, происходят события «mouseover» or «mouseout». Их можно использовать, кроме прочего, для создания эффектов проведения мыши, показывая или меняя стиль чего-либо, когда курсор находится над этим элементом.

    К сожалению, создание такого эффекта не ограничивается запуском его при событии «mouseover» и завершением при событии «mouseout». При движении мыши от узла к его дочерним узлам на родительском узле происходит событие «mouseout», хотя мышь, вообще говоря, его и не покидала. Что ещё хуже, эти события распространяются как и все другие, поэтому вы всё равно получаете «mouseout» при уходе курсора с одного их дочерних узлов того узла, где вы зарегистрировали обработчик.

    Для обхода проблемы можно использовать свойство relatedTarget объекта событий. Он сообщает, на каком узле была до этого мышь при возникновении события «mouseover», и на какой элемент она переходит при событии «mouseout». Нам надо менять эффект, только когда relatedTarget находится вне нашего целевого узла. Только в этом случае событие на самом деле представляет собой переход на наш узел (или уход с узла).

    Функция isInside перебирает всех предков узла, пока не доходит до верха документа (и тогда узел равен null), или же не находит заданного ей родителя.

    Должен добавить, что такой эффект достижим гораздо проще через псевдоселектор CSS под названием :hover, как показано ниже. Но когда при наведении вам надо делать что-то более сложное, чем изменение стиля узла, придётся использовать трюк с событиями «mouseover» и «mouseout».

    События прокрутки

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

    В примере в правом верхнем углу документа создаётся индикатор процесса, который заполняется по мере прокрутки элемента вниз.

    Позиция элемента fixed означает почти то же, что absolute, но ещё и предотвращает прокручивание элемента вместе с остальным документом. Смысл в том, чтобы оставить наш индикатор в углу. Внутри него находится другой элемент, который изменяет размер, отражая текущий прогресс. Мы используем проценты вместо px для задания ширины, чтобы размер элемента изменялся относительно размера всего индикатора.

    Глобальная переменная innerHeight даёт высоту окна, которую надо вычесть из полной высоты прокручиваемого элемента – при достижении конца элемента прокрутка заканчивается. (Также в дополнение к innerHeight есть переменная innerWidth). Поделив текущую позицию прокрутки pageYOffset на максимальную позицию прокрутки, и умножив на 100, мы получили процент для индикатора.

    Вызов preventDefault не предотвращает прокрутку. Обработчик события вызывается уже после того, как прокрутка случилась.

    События, связанные с фокусом

    При получении элементом фокуса браузер запускает событие “focus”. Когда он теряет фокус, запускается событие “blur”.

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

    Следующий пример демонстрирует текст подсказки для того текстового поля, у которого в данный момент фокус.

    Объект window получает события focus и blur, когда пользователь выделяет или убирает фокус с закладки браузера или окна браузера, в котором показан документ.

    Событие загрузки

    Когда заканчивается загрузка страницы, на объектах window и body запускается событие “load”. Это часто используется для планирования инициализирующих действий, которым необходим полностью построенный документ. Вспомните, что содержимое тегов

    Представьте, что возведение в квадрат – очень тяжёлое, долго работающее вычисление, которое нам надо запустить фоновым потоком. Такой код порождает «рабочего», отправляет ему несколько сообщений, и выводит результаты.

    Функция postMessage отправляет сообщение, которое запускает событие “message” у принимающей стороны. Скрипт, создавший рабочего, отправляет и получает сообщения через объект Worker, тогда как рабочий общается со скриптом, создавшим его, отправляя и получая сообщения через его собственное глобальное окружение – которое является отдельным окружением, не связанным с оригинальным скриптом.

    Установка таймеров

    Функция setTimeout схожа с requestAnimationFrame. Она планирует запуск другой функции в будущем. Но вместо вызова функции при следующей перерисовке страницы, она ждёт заданное в миллисекундах время. Эта страница через две секунды превращается из синей в жёлтую:

    Иногда вам надо отменить запланированную функцию. Это можно сделать, сохранив значение, возвращаемое setTimeout, и затем вызвав с ним clearTimeout.

    Функция cancelAnimationFrame работает так же, как clearTimeout – вызов её со значением, возвращённым requestAnimationFrame, отменит этот кадр (если он уже не был вызван).

    Похожий набор функций, setInterval и clearInterval используется для установки таймеров, которые будут повторяться каждые X миллисекунд.

    Устранение помех (debouncing)

    У некоторых событий есть возможность выполняться быстро и много раз подряд (например, «mousemove» и «scroll»). При обработке таких событий надо быть осторожным и не делать ничего «тяжёлого», или ваш обработчик займёт столько времени на выполнение, что взаимодействие с документом будет медленным и прерывистым.

    Если в таком обработчике надо сделать что-то нетривиальное, можно использовать setTimeout, чтобы гарантировать, что вы делаете это не слишком часто. Это обычно называют «устранением помех» в событии. К этому существует несколько слегка различающихся подходов.

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

    Если задать undefined для clearTimeout, или вызвать его с таймаутом, который уже произошёл, то ничего не произойдёт. Таким образом, не надо осторожничать при его вызове, и мы просто поступаем так для каждого события.

    Можно использовать немного другой подход, если нам надо разделить ответы минимальными промежутками времени, но при этом запускать их в то время, когда происходят события, а не после. К примеру, надо реагировать на события «mousemove», показывая текущие координаты мыши, но только каждые 250 миллисекунд.

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

    У событий есть определяющий их тип («keydown», «focus», и так далее). Большинство событий вызываются конкретными узлами DOM, и затем распространяются на их предков, позволяя связанными с ними обработчикам обрабатывать их.

    При вызове обработчика ему передаётся объект события с дополнительной информацией о событии. У объекта также есть методы, позволяющие остановить дальнейшее распространение (stopPropagation) и предотвратить обработку события браузером по умолчанию (preventDefault).

    Нажатия на клавиши запускают события «keydown», «keypress» и «keyup». Нажатия на кнопки мыши запускают события «mousedown», «mouseup» и «click». Движения мыши запускают события «mousemove», и возможно «mouseenter» и «mouseout».

    Прокрутку можно обнаружить через событие “scroll”, а изменения фокуса через события «focus» и «blur». Когда заканчивается загрузка документа, у объекта window запускается событие “load”.

    В одно и то же время может работать один участок программы. Поэтому обработчики событий и другие запланированные скрипты будут ждать окончания работы текущих.

    Упражнения

    Цензура клавиатуры

    В промежутке с 1928 по 2013 год турецкие законы запрещали использование букв Q, W и X в официальных документах. Это являлось частью общей инициативы подавления курдской культуры – эти буквы используются в языке курдов, но не у турков.

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

    След мыши

    В ранние дни JavaScript, когда было время кричащих домашних страниц с обилием анимированных картинок, люди использовали язык очень вдохновляющими способами. Одним из них был «след мыши» — серия картинок, которые следовали за курсором при его движении по странице.

    Я хочу, что бы вы в упражнении сделали такой след. Используйте с абсолютным позиционированием, фиксированным размером и цветом фона. Создайте кучку элементов и при движении мыши показывайте их следом за курсором.

    К этому можно подойти многими способами. Можно сделать очень простое или очень сложное решение, как угодно. Простое – хранить фиксированное количество элементов и проходить по ним в цикле, двигая каждый следующий на текущее место курсора, каждый раз когда случается событие «mousemove».

    Закладки

    Интерфейс закладок встречается часто. Он позволяет вам выбирать панель интерфейса, выбирая одну из нескольких торчащих закладок над элементом.

    В упражнении вам нужно сделать простой интерфейс закладок. Напишите функцию asTabs, которая принимает узел DOM, и создаёт закладочный интерфейс, показывая дочерние элементы этого узла. Ей нужно вставлять список элементов

    Защита от копирования с сайта
    (или отключаем правую кнопку мыши)

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

    Только данным способом от опытного пользователя защититься не получится, т.к. комбинация клавиш Ctrl+C продолжает работать, да и никто не отменял просмотр содержимого загружаемой странички. Данный метод может быть полезен при использовании целого комплекса мер по защите содержимого Вашего сайта от копирования.


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

    Для отключения правой кнопки мышки на своем сайте используйте следующий JavaScript код, который необходимо поместить в тело Вашей странички:

    Данный метод запрета использования правой кнопки мышки отлично работает в браузере IE, но в Опере, например, после вывода сообщения все равно меню появляется :(

    Запрет правого клика мыши и выделения текста

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

    Для чего это нужно?

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

    Запрет правого клика мыши

    Видел в сети несколько вариантов запрета правого клика, но они все какие-то громоздкие и корявые, используют всплывающие сообщения о том, что копировать текст нельзя. Я оптимизировал эти решения и вот что получилось.

    Первый метод использует javascript, но не работает в IE.

    Второй метод заключается в добавлении события oncontextmenu к тегу body:

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

    Запрет копирования текста

    Для запрета копирования текста следует добавить к тегу body еще два свойства:

    Событие oncopy запрещает копировать текст в буфер обмена операционной системы, а onselectstart запрещает выделять текст мышкой.

    Подведем итог

    Мы с вами сделали защиту от «дурака». Любой более или менее подготовленный пользователь знает, что нажав Ctrl+U можно с легкостью скопировать нужный текст из исходного кода страницы. Однако, как показывает практика, от дураков и нужно защищаться!

    Редактор скриптов, все команды с примерами

    Список возможных задач

    Перейдите в редактор скриптов.

    Инструкции по написанию скриптов

    1. Скриптовый язык разработан специально для проекта BotMek и носит уникальный характер, все совпадения с другими языками — случайны.
    2. Язык имеет регистронезависимый синтаксис.
    3. Каждая команда должна начинаться с новой строки.
    4. Каждая команда обязательно имеет хотя бы 1 параметр взятый в скобочки ( параметр ).
    5. Окончание команды является точка с запятой — ; .

    Нажатие левой кнопки мышки (нажать и отпустить)

    Команда
    left(X, Y, Time);
    Параметры

    В качестве координат X и Y может принимать параметр CursorX и CursorY;

    CursorX — координаты текущего положения мыши по оси X;

    CursorY — координаты текущего положения мыши по оси Y;

    X — координаты по оси X, обязательный параметр, целое число; Y — координаты по оси Y, обязательный параметр, целое число; Time — длительность зажатия в милисекундах, необязательный параметр, целое число;
    Примеры
    left(10,15); //Нажать левой кнопкой мыши в координаты X10, Y15
    left(10,15,1000); //Нажать левой кнопкой мыши в координаты X10, Y15 и держать 1 секунду
    left(cursorX,cursorY); //Нажать левой кнопкой мыши в координаты текущего положения мыши

    Зажатие левой кнопки мышки (нажать без отпускания)

    Команда
    leftDOWN(X, Y);
    Параметры

    В качестве координат X и Y может принимать параметр CursorX и CursorY;

    CursorX — координаты текущего положения мыши по оси X;

    CursorY — координаты текущего положения мыши по оси Y;

    X — координаты по оси X, обязательный параметр, целое число; Y — координаты по оси Y, обязательный параметр, целое число; Time — длительность зажатия в милисекундах, необязательный параметр, целое число;
    Примеры
    leftDOWN(10,15); //Зажать левую кнопку мыши в координатах X10, Y15
    leftDOWN(cursorX,cursorY); //Зажать левую кнопку мыши в координатах текущего положения мыши

    Отпускание левой кнопки мышки (отжать)

    Команда
    leftUP(X, Y);

    В качестве координат X и Y может принимать параметр CursorX и CursorY;

    CursorX — координаты текущего положения мыши по оси X;

    CursorY — координаты текущего положения мыши по оси Y;

    X — координаты по оси X, обязательный параметр, целое число; Y — координаты по оси Y, обязательный параметр, целое число; Time — длительность зажатия в милисекундах, необязательный параметр, целое число;
    Примеры
    leftUP(10,15); //Отпустить левую кнопку мыши в координатах X10, Y15
    leftUP(cursorX,cursorY); //Отпустить левую кнопку мыши в координатах текущего положения мыши

    Нажатие правой кнопки мышки (нажать и отпустить)

    Команда
    right(X, Y, Time);

    В качестве координат X и Y может принимать параметр CursorX и CursorY;

    CursorX — координаты текущего положения мыши по оси X;

    CursorY — координаты текущего положения мыши по оси Y;

    X — координаты по оси X, обязательный параметр, целое число; Y — координаты по оси Y, обязательный параметр, целое число; Time — длительность зажатия в милисекундах, необязательный параметр, целое число;
    Примеры
    right(10,15); //Нажать правой кнопкой мыши в координаты X10, Y15
    right(10,15,1000); //Нажать правой кнопкой мыши в координаты X10, Y15 и держать 1 секунду
    right(cursorX,cursorY); //Нажать правой кнопкой мыши в координаты текущего положения мыши

    Зажатие правой кнопки мышки (нажать без отпускания)

    Команда
    rightDOWN(X, Y);

    В качестве координат X и Y может принимать параметр CursorX и CursorY;

    CursorX — координаты текущего положения мыши по оси X;

    CursorY — координаты текущего положения мыши по оси Y;

    X — координаты по оси X, обязательный параметр, целое число; Y — координаты по оси Y, обязательный параметр, целое число; Time — длительность зажатия в милисекундах, необязательный параметр, целое число;
    Примеры
    rightDOWN(10,15); //Зажать правую кнопку мыши в координатах X10, Y15
    rightDOWN(cursorX,cursorY); //Зажать правую кнопку мыши в координатах текущего положения мыши

    Отпускание правой кнопки мышки (отжать)

    Команда
    rightUP(X, Y);

    В качестве координат X и Y может принимать параметр CursorX и CursorY;

    CursorX — координаты текущего положения мыши по оси X;

    CursorY — координаты текущего положения мыши по оси Y;

    X — координаты по оси X, обязательный параметр, целое число; Y — координаты по оси Y, обязательный параметр, целое число; Time — длительность зажатия в милисекундах, необязательный параметр, целое число;
    Примеры
    rightUP(10,15); //Отпустить правую кнопку мыши в координатах X10, Y15
    rightUP(cursorX,cursorY); //Отпустить правую кнопку мыши в координатах текущего положения мыши

    Нажатия клавиатуры

    Нажатие клавиатурной клавиши (нажать и отпустить)

    Команда
    Send(Key, Time);
    Key — нажимаемая клавиша, обязательный параметр, английская раскладка; Time — длительность зажатия в милисекундах, необязательный параметр, целое число;
    Примеры
    Send(G); //Нажать клавишу G
    Send(G, 2000); //Зажать клавишу G на 2 сек, после чего отпустить

    Зажатие клавиатурной клавиши (нажать без отпускания)

    Команда
    SendDOWN(Key);
    Параметры
    Key — нажимаемая клавиша, обязательный параметр, английская раскладка;
    Примеры
    SendDOWN(G); //Зажать клавишу G

    Отпускание клавиатурной клавиши (отжать)

    Команда
    SendUP(Key);
    Параметры
    Key — нажимаемая клавиша, обязательный параметр, английская раскладка;
    Примеры
    SendUP(G); //Отпустить клавишу G

    Возможные значения параметра Key

    Esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Del Home End PrtScn ` 1 2 3 4 5 6 7 8 9 0 — = Backspace NumLock Insert Tab Q W E R T Y U I O P [ ] \ PageUp PageDown Caps A S D F G H J K L ; ‘ Enter Pause Shift Z X C V B N M , . / Ctrl Win Alt Space right left down up

    Ожидание/Задержка

    Команда
    Sleep(Time);
    Параметры
    Time — длительность задержки в милисекундах, обязательный параметр, целое число;
    Примеры
    Sleep(2000); //Ожидать 2 секунды

    Комментарии в коде

    Комментарий в коде — это текст который не учитывается компилятором. Комментарии служат для заметок пользователями.
    Текст комментария начинается с двух косык черточек » // «, все что идет далее является комментарием.

    Пример

    //Этот текст является комментарием

    Блоки (свернуть/развернуть)

    Директива region позволяет указать блок кода, который можно разворачивать и сворачивать.
    В больших файлах кода очень удобно сворачивать или скрывать одну или несколько областей,
    чтобы не отвлекать внимание от той части файла, над которой в настоящее время идет работа.
    В конце блока #region должна присутствовать директива #endregion.

    Как запретить контекстное меню (правую кнопку мыши) на изображениях. 4 способа.

    Прежде всего вы должны знать, что запрет контекстного меню не гарантирует вам того, что пользователь не сможет сохранить картинку к себе на комп. Даже если он не знает, как отключать JavaScript, он сможет воспользоваться инструментами для разработчика в браузере или какой-нибудь сторонней программкой для создания скриншотов.

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

    Способ 1. При помощи JavaScript

    В данном случае всё, что нам потребуется, это вставить следующий код в ваш исполняемый js-файл или между тегами прямо в тело документа.

    Имейте ввиду, что если вы вставите код в конец HTML-документа, то запрет на контекстное меню сработает не сразу, а только по мере подгрузки страницы. Это будет хорошо ощутимо с медленным интернет-соединением.

    Способ 2. Задействуем jQuery, тем самым сократив код

    Думаю, что не нужно напоминать, что прежде всего у вас должна быть подключена библиотека jQuery. Но только ради этого подключать её само собой не стоит, лучше уж воспользуйтесь первым способом.

    Способ 3. При помощи CSS

    Интересный способ. Отлично подойдёт для элементов интерфейса и не сгодится для изображений в контенте сайта (плохо для SEO — такие изображения не увидят поисковики).
    Итак, предположим, у нас есть какое-то изображение:

    Теперь, вместо этой строчки вставляем блок

    В результате, хоть контекстное меню и не исчезнет полностью, из него пропадут такие пункты, как «Сохранить картинку как…» и «Копировать URL картинки». Пример для Google Chrome:

    Запрет контекстного меню на конкретных изображениях при помощи HTML-атрибута

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

    Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2020 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.

    Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

    Илон Маск рекомендует:  Что такое код ldap_mod_del
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL