Spec-Zone.ru › jQuery

событие клика

Свяжите обработчик события с событием "клик" или запустите это событие на элементе.

Содержание:

  • .on( "клик" [, eventData ], handler )
    • .on( "клик" [, eventData ], handler )
  • .trigger( "клик" )
    • .trigger( "клик" )

.on( "клик" [, eventData ], handler )Возвращает: jQuery

Описание: Свяжите обработчик события с событием "клик".

  • версия добавлена: 1.7.on( "клик" [, eventData ], handler )

    • "клик"
      Тип: строка
      Строка "click".
    • eventData
      Тип: Любое
      Объект, содержащий данные, которые будут переданы обработчику события.
    • handler
      Тип: Функция( Event eventObject )
      Функция, которая выполняется каждый раз, когда событие срабатывает.

Эта страница описывает событие click. Для устаревшего метода .click(), см. .click().

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

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>
Рисунок 1 - Иллюстрация рендерного HTML

Обработчик событий может быть привязан к любому <div>:

$( "#target" ).on( "click", function() {
  alert( "Handler for `click` called." );
} );

Теперь, если мы нажмём на этот элемент, появится сообщение об ошибке:

Обработчик для `клик` вызван.

Мы также можем запустить событие, когда нажимают на другой элемент:

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "click" );
} );

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

Событие click срабатывает только после этой последовательности событий:

  • Кнопка мыши нажимается, когда указатель находится внутри элемента.
  • Кнопка мыши отпускается, когда указатель находится внутри элемента.

Это обычно желаемая последовательность действий перед выполнением действия. Если это не требуется, события mousedown или mouseup могут быть более подходящими.

Примеры:

Скрыть абзацы на странице при нажатии на них:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }
  p:hover {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
 
<script>
$( "p" ).on( "click", function() {
  $( this ).slideUp();
} );
</script>
 
</body>
</html>

Демо:

Запустить событие клика для всех абзацев на странице:

$( "p" ).trigger( "click" );

.trigger( "клик" )Возвращает: jQuery

Описание: Запустить событие "клик" на элементе.

  • версия добавлена: 1.0.trigger( "клик" )

    • "клик"
      Тип: строка
      Строка "click".

См. описание для .on( "click", ... ).

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jquery.com/click

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API