Бегущая строка, работает после клика мышкой в input


Содержание

Нажатие кнопок мыши

Кнопка или колёсико мыши

Определить, какая кнопка мыши была нажата (левая, правая или колёсико) можно через метод onmousedown .

Для левой и правой кнопки мыши есть свои методы.

Выполнять код при нажатии по ссылке

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

Двойное нажатие левой кнопки мыши

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

Нажатие кнопки мыши с зажатой клавишей

При нажатии по кнопке мыши, можно также проверять какая клавиша при этом была зажата (Ctrl, Shift, Alt или Cmd).

Клавиша «Cmd» присутсвует на компьютерах Mac.

Техническая поддержка сервиса Quadro.Boards

Меню навигации

Пользовательские ссылки

Объявление

Новости сервиса

О форуме

Полезные ссылки

Информация о пользователе

Вы здесь » Техническая поддержка сервиса Quadro.Boards » Скрипты и дополнения » Бегущая строка с остановкой при наведении

Бегущая строка с остановкой при наведении

Сообщений 1 страница 12 из 12

Поделиться105.12.2008 15:40:21

  • Автор: Kritel’
  • Зарегистрирован: 13.07.2008
  • Сообщений: 262
  • Уважение: +25
  • Позитив: +24
  • Пол: Женский
  • Последний визит:
    24.12.2010 08:07:10

Бегущая строка с остановкой при наведении

Вставлять там, где требуется.
Можно использовать в объявлении или для прокрутки баннеров

Теги: Скрипты и дополнения, Информационные контейнеры,Бегущая строка

Поделиться211.01.2009 14:45:37

  • Автор: . Fakira.
  • Зарегистрирован: 11.01.2009
  • Сообщений: 10
  • Уважение: 0
  • Позитив: 0
  • Последний визит:
    12.01.2009 19:17:17

а куда вот это всё вставлять??

Поделиться311.01.2009 15:15:27

  • Автор: Duka
  • Зарегистрирован: 29.02.2008
  • Сообщений: 4768
  • Уважение: +1087
  • Позитив: +349
  • Пол: Мужской
  • Возраст: 29 [1990-06-25]
  • Последний визит:
    07.11.2020 17:55:57

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

Поделиться410.12.2009 18:33:30

  • Автор: Olysa87
  • Зарегистрирован: 10.12.2009
  • Сообщений: 2
  • Уважение: 0
  • Позитив: 0
  • Пол: Женский

  • Последний визит:
    24.12.2009 14:37:17

у меня строка начинается с середины.дайте код чтоб с права на лево

Поделиться510.12.2009 18:34:32

  • Автор: Paranoia Doll
  • Зарегистрирован: 17.01.2009
  • Сообщений: 1108
  • Уважение: +170
  • Позитив: +76
  • Пол: Женский
  • Возраст: 26 [1993-07-22]
  • Последний визит:
    04.09.2013 19:17:23

Выделенное просто сотрите.

Поделиться615.05.2011 09:31:19

  • Автор: Автомат АКА
  • Зарегистрирован: 08.05.2011
  • Сообщений: 63
  • Уважение: +4
  • Позитив: +2
  • Пол: Мужской
  • Возраст: 21 [1998-08-19]
  • Предупреждения:
  • Последний визит:
    21.08.2011 02:31:02

Отредактировано Автомат АКА (15.05.2011 09:35:24)

Поделиться704.06.2013 23:20:18

  • Автор: Лестчий
  • Зарегистрирован: 21.01.2013
  • Сообщений: 79
  • Уважение: 0
  • Позитив: +35
  • Пол: Мужской
  • Последний визит:
    25.05.2020 05:55:05

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

Поделиться804.06.2013 23:32:00

  • Автор: Deff
  • Зарегистрирован: 14.09.2010
  • Сообщений: 1838
  • Уважение: +395
  • Позитив: +185
  • Последний визит:
    10.11.2020 09:50:21

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

Создайте контейнер установки

112 — Высота Блока;
200 — ширина Блока;
210 — Отступ от верхнего края экрана (*Регулируем
380 — Отступ вправо от текущего положения (*Регулируем — значение может быть как положительным, — так и отрицательным

*Все цифры красным регулируем под себя
Cинее — убираем, после успешного позиционирования

Вместо
Тут код вашей картинки или объявления .
Ставите бегущую строку

Бегущая строка, работает после клика мышкой в input

БлогNot. Бегущая строка на Javascript и CSS3

Бегущая строка на Javascript и CSS3

Был когда-то, а точней, и сейчас есть нестандартный, но широко применяемый тег , создающий эффект бегущей строки: Привет, мир!

Намного ли сложнее сделать то же самое средствами Javascript, дабы избежать невалидного HTML? Если мы согласны не гонять строчку по всей ширине экрана, то ненамного, приведу работающий пример и его код:

А вот полноценная эмуляция потребует применения JQuery и/или написания заметно более сложного кода.

Есть Marquee и в CSS3, выглядит перспективно и программирования не требует вовсе, правда, сильно устаревшие браузеры CSS3 не поддерживают. Приведу пример, стиль которого предполагает ещё и остановку прокрутки строки при наведении мыши на текст.

13.09.2020, 15:04; рейтинг: 6495

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

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

Более новая информация по этой теме находится на странице 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 , всё возвращается в исходное состояние.

Xlib, как правильно послать клик мышкой в окно

Доброго времени суток,

есть id окна, есть координаты, нужно в это окно послать клик мышкой по данным координатам.

Создаю своё окно, указываю ему в параметрах

А при вызове createWindow указываю маску CWEventMask.

Далее отслеживаю события в своём окне, при событии ButtonPress посылаю сигнал клика в другое окно:

case ButtonPress: xEvent.xbutton.window = targetWindowId;

xEvent.type = ButtonPress; XSendEvent (d, targetWindowId, False, ButtonPressMask, &xEvent);

xEvent.type = ButtonRelease; XSendEvent (d, targetWindowId, False, ButtonReleaseMask, &xEvent);

Проблемы: — Разным окнам задержка в clickDelay нужна разная, кому то меньше кому то больше. — Для некоторых окон пришлось использовать XWarpPointer, ждать и только потом клик слать. — Но некоторым окнам и этого было мало, пришлось MotionEvent посылать. — И всё равно остались окна, которым по барабану. — Так же есть окна, например netbeans, в которых элементы меню работают хорошо, а поле редактора либо вообще не принимает клик, либо в одном и том же месте.

Вопросы: — Как правильно послать клик мышкой окну с известным id? — Если провести по окну приложения, которое не в фокусе курсором, то там где курсор попадает на элементы меню, эти элементы реагируют, а если я в своём окне отлавливаю MotionNotify, и пересылаю его другому окну, то они не подсвечаиваются, хотя xev показывает что все события отлично доходят, почему так?

Илон Маск рекомендует:  Шаблон сайта благотворительность HTML, CSS, Photoshop (psd), 2 страницы

Вот это, наверное, по теме.

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

Спасибо за ссылку, открыл исходники xdotool, у меня почти тоже самое было написано, даже названия переменных часто один в один :D

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

Самый первый свой код перевёл на событие ButtonRelease, и всё работает как часы, даже время между передвижением курсора и кликом поставил на 0, всё работает.

Единственная вещь, которая напрягает — надо сначала передвинуть курсор потом кликать, просто послать клик не прокатывает, как будто бы XSendEvent не берёт координаты из структуры ивента, а сам смотрит где сейчас мышь. И если окно не отрисовано, то клика не происходит, т.е. если оно свёрнуто то ясно понятно, но если его перкрыть частично, то в перекрытую часть клики уже не проходят :(

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

Вот, например, поясняющий текст из man xdotool:

То есть это недостаток XSendEvent. Этот метод (как и твой) используется xdotool в случае, если явно указывается xid окна в коммандной строке. Но, как видишь. это может не заработать в некоторых приложениях, потому что они фильтруют по флагу. UPD в этом месте: но с событиями мыши дело может обстоять лучше. С событиями клавиатуры хуже.

А XTEST обладает тем недостатком, что нельзя послать событие конкретному окну. Чтобы конкертному, надо его отыскать, где оно находится, поднять его (передать фокус), отыскать, куда именно клацнуть.

Странно — у меня все приложения заработали без XTEST, единственное опять кучу времени потратил на kwin, оказалось, чтобы повесить на своё окно прослушку ButtonRelease, надо не только BUttonReleaseMask, но и ButtonPressMask устанавливать ему в свойствах.

В остальном с десяток приложений работает, на openbox, xmonad, kwin в среде lxde, kde и без среды.

А про xinput2 можете подсказать? — Там тоже будет эта возможная проблема?

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

Ещё хотел уточнить, а есть разница между мышкой и экранным тачем? Разве это не одно и тоже с точки зрения иксов? Просто заметил в Xinput2 отдельные структуры для тача.

А нафига вообще может стоять фильтрация? Ну то есть они (разрабы какого-нидуь приложения) поставили дополнительное условие if .artificial then reject. Зачем фильтровать?

Firefox последний тоже работает, как и urxvt, konsole, lxterminal. Только если окно перекрыто другим окном или свёрнуто, то клики не проходят в скрытую область, получается у меня XSendEvent в режиме XTEST работает? :)

Думаю это может быть критично для сайтов типа интернет банка :D

А нафига вообще может стоять фильтрация? Ну то есть они (разрабы какого-нидуь приложения) поставили дополнительное условие if .artificial then reject. Зачем фильтровать?

Я сам не совсем понимаю, но догадываюсь. В протокол заложили возможность, что приложения, получившие event могут отличить, синтетическое это сообщение или от реальных устройств ввода. Возможность дали, а политику никак не ограничили, ибо X не диктует политику, а дает механизм :)

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

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

Странно — у меня все приложения заработали без XTEST, единственное опять кучу времени потратил на kwin, оказалось, чтобы повесить на своё окно прослушку ButtonRelease, надо не только BUttonReleaseMask, но и ButtonPressMask устанавливать ему в свойствах.

Ничего странного. Значит, приложения (или тулкиты) не отсеивают синтетические сообщения.

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


Ага, команды расширения XTEST позволяют X-клиенту попросить X-сервер сгенерировать события устройств ввода (переместить мышку, нажать кнопку мышки или клавиатуры), будто это реальные устройства делают. Сообщение проходит стандартным образом и абсолютно не отличается от сообщений реальных устройств. Приложение не сможет отличить, настоящее оно или нет. Все эти замуты с безопасностью от XSendEvent сводятся на нет расширением XTEST (просто его когда-то не существовало вовсе): всегда можно отыскать, где сидит то или иное окно, сделать его активным и ввести что угодно. Разница только в том, что сгенерированное событие проходит до окон стандартным образом, адресация тому или иному окну невозможна. X-сервер же тоже получает от мышки только координаты, а адресация уже потом осуществляется в соответствии с фокусом или взаимным перекрытием.

Все эти замуты с безопасностью от XSendEvent сводятся на нет расширением XTEST

При этом тулкиты продолжают фильтровать artificial сообщения. цЫрк.

При этом тулкиты продолжают фильтровать artificial сообщения. цЫрк.

А фильтруют? Я не пробовал. Вроде как у ТС’а не фильтруется и работает большинство.

Все эти замуты с безопасностью от XSendEvent сводятся на нет расширением XTEST

Кстати, XTEST можно запретить загружать в настройках сервера в секции Extensions.

Firefox последний тоже работает, как и urxvt, konsole, lxterminal. Только если окно перекрыто другим окном или свёрнуто, то клики не проходят в скрытую область, получается у меня XSendEvent в режиме XTEST работает? :)

Потому что работает механизм диспетчеризации сообщений. Попробуй-ка active grab сделать, поделать свои виртуальные дела мышкой над перекрытым окном, а потом ungrab:

The source of the event is the viewable window that the pointer is in. The window used by the X server to report these events depends on the window’s position in the window hierarchy and whether any intervening window prohibits the generation of these events. Starting with the source window, the X server searches up the window hierarchy until it locates the first window specified by a client as having an interest in these events. If one of the intervening windows has its do-not-propagate-mask set to prohibit generation of the event type, the events of those types will be suppressed. Clients can modify the actual window used for reporting by performing active grabs and, in the case of keyboard events, by using the focus window.

Потом расскажи, что получилось.

Я вообще так понял, что active grab это зло, использую только для отслеживания system-wide нажатий например. Но с active grab большая проблема, если кто то уже забиндил за собой какое то событие, то забиндить его для себя не получится, только пассивная прослушка окна поможет. Но и это ещё не все, есть удалённая машина, там XGrabKey срабатывает на рутовое окно, но реально приложение моё не получает сигналов, как будто кто то вытягивает все клавиатурные ивенты из очереди иксов, такое возможно?

А насколько костыльным считается пройти по всему дереву окон, и повесить там везде XSelectInput, чтобы не маяться с active grab?

Но и это ещё не все, есть удалённая машина, там XGrabKey срабатывает на рутовое окно, но реально приложение моё не получает сигналов, как будто кто то вытягивает все клавиатурные ивенты из очереди иксов, такое возможно?

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

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

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

Я не понимаю, при чем тут получение события? Я же понимаю, что тебе надо клик выполнить, а не события получать.

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

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

Я не понимаю ничего. Я комментировал проблему, при которой частично закрытые окна не получают события по нажатию мышки. Это событие «глотает» приложение, которое находится поверх. Можешь проверить это, наложив два одинаковых окна приложения (два раза запустить одно приложение) друг на друга и посылая клик нижнему. Несмотря на указанный window id нижнего, событие получит верхнее окно, которое тебя не интересует. Это легко проверяется xdotool-ом.

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

Разве я могу грабить что то что уже заграблено? Или я неправильно понял документацию?

Всмысле, firefox например работает с мышкой, значит заграбить мышку я уже не могу?

Я не понимаю ничего. Я комментировал проблему, при которой частично закрытые окна не получают события по нажатию мышки. Это событие «глотает» приложение, которое находится поверх. Можешь проверить это, наложив два одинаковых окна приложения (два раза запустить одно приложение) друг на друга и посылая клик нижнему. Несмотря на указанный window id нижнего, событие получит верхнее окно, которое тебя не интересует. Это легко проверяется xdotool-ом.

Это всё я понял и прочувствовал втч и с помощью xdotool’а, вопрос про system-wide мониторинг нажатых клавиш клавиатуры, и граббинг мыши(тача) для окна.

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

Ты попробуй. Я тоже не знаю, что получится (не пускался в такие эксперименты). Две функции добавить. Зачем теоретизировать, получится или нет :) Надо проверить.

А я не ошибусь если скажу, что работа с иксами позволяет одно и тоже сделать кучей способов, с разными последствиями и подводными камнями? Т.е. это нормально что приходится так возится, или где то есть статьи от программистов, как с этим ПРАВИЛЬНО работать? :)

Ты попробуй. Я тоже не знаю, что получится (не пускался в такие эксперименты). Две функции добавить. Зачем теоретизировать, получится или нет :) Надо проверить.

А если не секрет, ты в иксах по работе разбираешься или хобби?

вопрос про system-wide мониторинг нажатых клавиш клавиатуры

Мышка не реагирует на клики: устранение неполадок

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

Мусор

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

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

Неисправность

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

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

Проверка работоспособности

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

Такой прием позволяет наносить визиты в сервисные центры с конкретными претензиями. Также при помощи подобной проверки можно понять зачастую источники проблем и сбоев. Какие еще варианты развития событий возможны? На что следует обратить внимание в том или ином случае?

Гнезда и разъемы

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

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

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

Драйверы

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

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

В данном случае нужно всего лишь установить драйвера на компьютер (обычно к мышкам они прилагаются) или обновить уже имеющиеся. После этого операционная система перезагружается. Прогресс есть? Тогда можно не беспокоиться. Мышка все равно не работает в полной мере? Нужно искать источник проблемы дальше. Альтернатив еще очень много.

Тачпад

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

Илон Маск рекомендует:  Колонки одинаковой высоты через CSS3

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

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

Процессор

А вот если мышка не сразу реагирует на клики, то проблема может быть другой. Например, медленный ответ от устройств ввода-вывода информации иногда объясняется высокой загруженностью процессора.

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

  • большое количество функционирующих программ;
  • несоответствие компьютера системным требования операционной системы;
  • вирусы;
  • долгая работа оборудования без выключения или перезагрузки;
  • нехватка места на жестком диске для нормальной работы ОС.

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

Вирусы

Мышка не реагирует на клики? Вирус, как уже было сказано, — это волне реальная причина возникающей неполадки с оборудованием. Любая компьютерная «зараза» способна привести к данному явлению.

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

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


Несовместимость

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

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

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

Электропитание

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

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

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

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

Выразительный 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, мы получили процент для индикатора.

Илон Маск рекомендует:  Iis управление памятью

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

Как поймать событие нажатия Enter в поле input

Дата публикации: 2015-11-11

От автора: этот простой кусочек кода демонстрирует, как перехватить значение текстового поля при нажатии клавиши Enter – в vanilla JS и JQuery.

Вступление

Пару недель назад мой друг попросил разобраться с маленькой проблемой. Ему было нужно захватить значение текстового поля каждый раз, когда пользователь в него что-то вводит и нажимает на Enter. С такими современными фреймворками как Angular и React это пустячное дело, так как в них встроена привязка данных. Конечно же, никто не пошел по такому пути. К счастью и без данных фреймворков код оказался очень прост. Ниже я представил два кусочка кода – первый на JS, второй на JQuery. В основе обоих лежит определение текстового поля:

Событие mousePress на JavaScript и jQuery

Здравствуйте, уважаемые читатели блога LifeExample.Столкнулся я на днях с одной элементарной задачей. Нужно было написать JavaScript, который бы увеличивал число в поле ввода, пока пользователь зажал кнопку мыши и держит ее. Другими словами, на странице имеется input со значением равным 0, рядом с инпутом расположен любой элемент, ну например кнопка с надписью «увеличить», когда нажимаем на «увеличить» число в инпуте увеличивается на +1 пока не отпустили кнопку мышки.

Демо пример mousepress в javascritp

Наверняка 90% читателей сейчас подумало о том, нужно использовать onclick или просто click если это jQuery. К сожалению это не так, навесив на элемент событие click, оно выполнится лишь единожды при нажатии, а нужно выполнять действие, пока кнопка нажата без перерыва .

Как выяснилось в ходе изучения задачи, JavaScript предоставляет нам методы:

  • Mousemove — нажатие на кнопку мыши;
  • Mousedown — нажатие на кнопку мыши;
  • Mouseup — нажатая кнопка мыши отпущена;
  • Mouseleave – курсор покинул область объекта, либо фокус снялся;
  • Click — клик мыши;
  • Dblclick — двойной клик;
  • Contextmenu – контекстное меню.

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

Для этого используем имеющиеся события Mousedown, Mouseup, Mouseleave и Settimeout.

Алгоритм для события Mousepress на JavaScript

Алгоритм эмулирования события mousepress на JavaScript с использованием jQuery выглядит таким образом:

  1. При нажатии на кнопку (Button) мыши (Mousedown) устанавливаем флаг (isDown = true).
  2. Пока флаг (isDown) стоит, выполняем какое либо действие (doAction) с заданным интервалом времени (Settimeout).
  3. Если кнопка отпущена (Mouseup) сбрасываем флаг (isDown = false).
  4. Если курсор покидает область кнопки (Button) при этом генерируя событие (Mouseleave) , сбрасываем флаг (isDown = false).

Вот и вся реализация mousepress и mousepressed на jQuery и Javascript.

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

Если произошло нажатие на кнопку и пользователь не отпускает ее первые 20 итераций, то шаг увеличится на 10, если после этого прошло еще 10 итераций, то шаг увеличится на 100 и так далее.

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

Надеюсь, данный материал по эмулированию mousepress на JavaScript поможет вам в реализации собственных задач.

Обработка события click средствами CSS

В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.

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

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

В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для «обнаружения» нажатия с помощью только CSS без JavaScript.

Примечание

Описанные способы не предназначены для «реальной жизни». Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока — прикоснуться к границам возможностей CSS.

Используем чекбокс

Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.

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

HTML

CSS

Метод основан на использовании псевдо-класса :checked и селектора

. Обратите внимание, что он будет работать и с селектором + . Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.

Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:

Итак, мы прячем чекбокс и используем метку для реагирования на событие click:

У нас получилась кнопка, нажатие на которую меняет цвет текста в параграфе. Повторное нажатие на кнопку меняет цвет обратно.

(Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный — применение display:none .)

Плюсы

  • Бинарный, есть только два состояния — отмечен или не отмечен
  • Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом)
  • Позволяет организовать обработку связанных событий click (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее действие)

Минусы

  • Элементы должны иметь общего предка
  • Требуется дополнительная разметка HTML (input, label и так далее)
  • Требуется дополнительные действия для работы на мобильных браузерах

Способ с :target

Есть другой способ с использованием псевдо-класса :target. Данный псевдо-класс похож на псевдо-класс :hover тем, что соответствует только определенным условиям.

Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают.

HTML

CSS

При нажатии на ссылку ( href=»#id» ) изменяется URL и осуществляется переход по метке #id на странице. В данный момент элемент с идентификатором id может быть выделен с помощью псевдо-класса :target.

Плюсы

  • Простой код CSS
  • Отлично подходит для выделения разделов

Минусы

  • Мусор в истории браузера
  • Происходит прокручивание страницы
  • Требуется тег ссылки или операции с URL для включения хэштега
  • Можно воздействовать только на один элемент (так как ID является уникальным)
  • Нет способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL

Способ с :focus

Продолжим наш обзор способом с использованием другого псевдо-класса — :focus. Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе.

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

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

HTML

CSS

Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #.

Плюсы

  • Очень простой код CSS и HTML
  • Отличная навигация

Минусы

  • Требуется либо элемент с фокусом, либо атрибут tabindex
  • Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)

Способ с переходами

Вероятно, данный метод является самым «грязным» способом обработки события click в CSS.

Идея заключается в «хранении» стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации.

HTML

CSS

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

Плюсы

  • Просто и изящно
  • Сохраняется состояние, даже если переход не закончился

Минусы

  • Плохая поддержка в браузерах (нет в IE9 и Opera Mini)
  • Работает только со значениями, которые можно использовать с переходами
  • Нет способов возврата к исходному состоянию
  • Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/12/17/css-click-events/
Перевел: Сергей Фастунов
Урок создан: 18 Декабря 2012
Просмотров: 93580
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

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

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

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