102 lines
4.5 KiB
Markdown
102 lines
4.5 KiB
Markdown
---
|
||
title: Click Method
|
||
localeTitle: Метод Click
|
||
---
|
||
# Метод Click
|
||
|
||
Метод jQuery Click запускает функцию при нажатии элемента. Эта функция известна как «обработчик», потому что она обрабатывает событие click. Функции могут влияют на элемент HTML, привязанный к клику, используя метод jQuery Click, или они могут полностью изменить что-то еще. Наиболее часто используемая форма:
|
||
|
||
```javascript
|
||
$("#clickMe").click(handler)
|
||
```
|
||
|
||
Метод click использует функцию обработчика в качестве аргумента и выполняет его каждый раз, когда `#clickMe` элемент `#clickMe` . Функция обработчика получает параметр, известный как [eventObject,](http://api.jquery.com/Types/#Event) который может быть полезен для управления действием.
|
||
|
||
#### Примеры
|
||
|
||
Этот код показывает предупреждение, когда пользователь нажимает кнопку:
|
||
|
||
```html
|
||
|
||
<button id="alert">Click Here</button>
|
||
```
|
||
|
||
```javascript
|
||
$("#alert").click(function () {
|
||
alert("Hi! I'm an alert");
|
||
});
|
||
```
|
||
|
||
[jsFiddle](https://jsfiddle.net/pL63cL6m/)
|
||
|
||
[EventObject](http://api.jquery.com/Types/#Event) имеет некоторые встроенные методы, в том числе `preventDefault()` , который делает именно то, что он говорит, - останавливается событие по умолчанию для элемента. Здесь мы помещаем якорный тег в качестве ссылки:
|
||
|
||
```html
|
||
|
||
<a id="myLink" href="www.google.com">Link to Google</a>
|
||
```
|
||
|
||
```javascript
|
||
$("#myLink").click(function (event) {
|
||
event.preventDefault();
|
||
});
|
||
```
|
||
|
||
[jsFiddle](https://jsfiddle.net/dy457gbh/)
|
||
|
||
#### Дополнительные способы воспроизведения с помощью метода click
|
||
|
||
Функция обработчика также может принимать дополнительные данные в виде объекта:
|
||
|
||
```javascript
|
||
jqueryElement.click(usefulInfo, handler)
|
||
```
|
||
|
||
Данные могут быть любого типа.
|
||
|
||
```javascript
|
||
$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
|
||
alert(event.data.firstWord);
|
||
alert(event.data.secondWord);
|
||
});
|
||
```
|
||
|
||
Вызов метода click без функции обработчика запускает событие click:
|
||
|
||
```javascript
|
||
$("#alert").click(function () {
|
||
alert("Hi! I'm an alert");
|
||
});
|
||
|
||
$("#alert").click();
|
||
```
|
||
|
||
Теперь, всякий раз, когда страница загружается, событие click будет срабатывать, когда мы вводим или перезагружаем страницу и показываем назначенное предупреждение.
|
||
|
||
Также вы должны использовать .on ('click', ...) над .click (...), потому что первый может использовать меньше памяти и работать для динамически добавленных элементов.
|
||
|
||
[jsFiddle](https://jsfiddle.net/gspk6gxt/)
|
||
|
||
#### Распространенные ошибки
|
||
|
||
Событие click привязывается только к элементам, находящимся в настоящее время на DOM во время привязки, поэтому любые добавленные впоследствии элементы не будут связаны. Чтобы связать все элементов в DOM, даже если они будут созданы позднее, используйте метод `.on()` .
|
||
|
||
Например, этот пример метода click:
|
||
|
||
```javascript
|
||
$( "element" ).click(function() {
|
||
alert("I've been clicked!");
|
||
});
|
||
```
|
||
|
||
Можно изменить это на примере метода:
|
||
|
||
```javascript
|
||
$( document ).on("click", "element", function() {
|
||
alert("I've been clicked!");
|
||
});
|
||
```
|
||
|
||
#### Дополнительная информация:
|
||
|
||
Для получения дополнительной информации посетите [официальный сайт](https://api.jquery.com/click/#click) . |