Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
События мыши
Для обработки событий мыши в jQuery предназначены следующие методы:
click([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при щелчке на элементе или Web-странице. Если параметры не указаны, то будут вызваны обработчики. Событиюonclick
предшествуют два события:onmousedown
иonmouseup
. Выведем сообщение после щелчка на кнопке с идентификаторомbtn1
:
<button type="button" class="btn btn-primary" id="btn1">
Нажми меня</button>
$('#btn1').click( function() {
console.log('Вы нажали кнопку');
});
dblclick([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при двойном щелчке на элементе или Web-странице. Если параметры не указаны, то будут вызваны обработчики. Событиюondblclick
предшествуют три события:onmousedown
,onmouseup
иonclick
. Выведем сообщение в консоль при двойном щелчке на любом абзаце:
$('p').dblclick( function() {
console.log('Вы сделали двойной щелчок');
});
mousedown([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при нажатии кнопки мыши на элементе или на странице. Событиеonmousedown
возникает перед событиямиonmouseup
иonclick
;mouseup([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при отпускании ранее нажатой кнопки мыши. Событиеonmouseup
возникает между событиямиonmousedown
иonclick
. Выведем сообщения при нажатии и отпускании кнопки мыши над абзацем:
<p>Щелкните здесь</p>
<div id="log"></div>
$('p').mousedown( function() {
$('#log').append('Событие onmousedown<br>');
}).mouseup( function() {
$('#log').append('Событие onmouseup<br>');
});
mousemove([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при любом перемещении мыши. Выведем сообщение при перемещении курсора над абзацем:
$('p').mousemove( function() {
$('#log').append('Событие onmousemove<br>');
});
mouseover([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при наведении курсора мыши на элемент. Внутри обработчика через объект события доступно свойствоrelatedTarget
, содержащее ссылку на предыдущий элемент;mouseout([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при выходе курсора мыши за пределы элемента. Внутри обработчика через объект события доступно свойствоrelatedTarget
, содержащее ссылку на следующий элемент. При наведении курсора на ссылку, сделаем цвет ссылки красным и выведем сообщение, а при уходе курсора со ссылки — изменим ее цвет на черный и выведем сообщение:
<a href="#">Текст ссылки</a>
<div id="log"></div>
$('a').mouseover( function() {
$(this).css('color', 'red');
$('#log').append('Событие onmouseover<br>');
}).mouseout( function() {
$(this).css('color', 'black');
$('#log').append('Событие onmouseout<br>');
});
mouseenter([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при наведении курсора мыши на элемент;mouseleave([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при выходе курсора мыши за пределы элемента. Переделаем наш предыдущий пример и используем методыmouseenter()
иmouseleave()
:
$('a').mouseenter( function() {
$(this).css('color', 'red');
$('#log').append('Событие mouseenter<br>');
}).mouseleave( function() {
$(this).css('color', 'black');
$('#log').append('Событие mouseleave<br>');
});
hover()
— позволяет обработать наведение и уход курсора с помощью одного метода. Имеет следующие форматы:
hover(<Функция обратного вызова для события mouseenter>,
<Функция обратного вызова для события mouseleave>)
hover(<Функция обратного вызова для событий mouseenter
и mouseleave>)
Переделаем наш предыдущий пример и используем метод hover()
:
$('a').hover(
function() {
$(this).css('color', 'red');
$('#log').append('Событие mouseenter<br>');
},
function() {
$(this).css('color', 'black');
$('#log').append('Событие mouseleave<br>');
}
);
contextmenu([[<Данные>, ]<Функция обратного вызова>])
— функция обратного вызова выполняется при щелчке правой кнопкой мыши, приводящем к отображению контекстного меню. Выведем сообщение в консоль при отображении контекстного меню на любом абзаце:
<p>Текст</p>
$('p').contextmenu( function() {
console.log('Отображение контекстного меню');
});
Использование методов mouseenter()
, mouseleave()
и hover()
отличается от обработки событий onmouseover
и onmouseout
с помощью методов mouseover()
и mouseout()
. Если внутри блока существует другой блок, то событие onmouseover
будет вызываться при входе во внутренний блок, а событие onmouseout
— при выходе из него. При использовании событий mouseenter
и mouseleave
эти перемещения будут игнорироваться (листинг 1.12).
Листинг 1.12. События mouseenter
и mouseleave
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>События mouseenter и mouseleave</title>
<style>
.cls1 {
border: 2px solid black;
background-color: green;
padding: 30px;
}
.cls2 {
border: 2px solid black;
background-color: silver;
}
</style>
</head>
<body>
<p><b>Методы mouseover() и mouseout():</b></p>
<div class="cls1" id="div1">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log1"></div>
<p><b>Методы mouseenter() и mouseleave():</b></p>
<div class="cls1" id="div2">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log2"></div>
<p><b>Метод hover():</b></p>
<div class="cls1" id="div3">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log3"></div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#div1').mouseover( function() {
$('#log1').append('Событие onmouseover<br>');
});
$('#div1').mouseout( function() {
$('#log1').append('Событие onmouseout<br>');
});
$('#div2').mouseenter( function() {
$('#log2').append('Событие mouseenter<br>');
});
$('#div2').mouseleave( function() {
$('#log2').append('Событие mouseleave<br>');
});
$('#div3').hover(
function() {
$('#log3').append('Событие mouseenter (hover())<br>');
},
function() {
$('#log3').append('Событие mouseleave (hover())<br>');
}
);
});
</script>
</body>
</html>
Для блока с идентификатором div1
мы определили обработчики событий с помощью методов mouseover()
и mouseout()
. Если переместить курсор мыши через весь блок посередине, получим следующую последовательность событий:
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Для блока с идентификатором div2
обработчики событий назначены с помощью методов mouseenter()
и mouseleave()
. При том же самом действии мы получим только два события:
Событие mouseenter
Событие mouseleave
Для блока с идентификатором div3
обработчики событий назначены с помощью метода hover()
. При том же самом действии мы получим только два события:
Событие mouseenter (hover())
Событие mouseleave (hover())
Во всех приведенных в этом разделе методах мы еще не разобрались с параметрами, которые можно им передать. В качестве параметра <Функция обратного вызова>
указывается ссылка на функцию следующего формата:
function <Название функции>([<Объект event>]) {
// ...
}
Элемент, в котором обрабатывается событие, доступен внутри функции через указатель this
. Обратите внимание на то, что указатель this
ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре <Объект event>
указана переменная, то через нее можно обратиться к свойствам объекта event
. Напишем обработчик щелчка мыши для двух элементов сразу. При нажатии выведем название тега в элементе с идентификатором log
:
<p>Текст</p>
<div>Текст</div>
<div id="log"></div>
$('p, div').click( function(e) {
$('#log')
.append('Элемент ' + e.target.tagName + '<br>');
});
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов