Оглавление

6.2. События мыши

Для обработки событий мыши в jQuery предназначены следующие методы.
click([<Функция обратного вызова>]) — выполняется при щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитировать щелчок на элементе. Событию onclick предшествуют два события: опmousedown и onmouseup. Выведем сообщение после щелчка на любой кнопке.


  $(":button").click(function() {
   alert("Вы нажали на кнопку");
});
  
<input type="button" value="Нажать">

dblclick([<Функция обратного вызова>]) — выполняется при двойном щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитировать двойной щелчок на элементе. Событию ondblclick предшествуют три события: onmousedown, onmouseup и onclick. Выведем сообщение при двойном щелчке на любом абзаце.


$("p").dblclick(function() {
alert("Вы сделали двойной щелчок");
});

 

 

mousedown(<Функция обратного вызова>) — выполняется при нажатии кнопки мыши на элементе или странице. Событие onmousedown возникает перед событиями onmouseup и onclick.


mouseup(<Функция обратного вызова>) — выполняется при отпускании ранее нажатой кнопки мыши. Событие onmouseup возникает между событиями onmousedown и onclick. Выведем сообщения при нажатии и отпускании кнопки мыши над абзацем.


$("p").mouseup(function(){
$(this).append('<span style="color:#F00;">Mouse up. </span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Mouse down. </span>');
});

  <p>Щелкни меня</p>

 

 

mousemove(<Функция обратного вызова>) — выполняется при любом перемещении мыши. Выведем координаты курсора при движении по желтому прямоугольнику .

<!DOCTYPE html>
<html>
<head>
<style>
div { width:220px; height:170px; margin: 10px 50px 10px 10px;
background:yellow; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<p>
<span>Move the mouse over the div.</span>
<span>&nbsp;</span>
</p>
<div></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
});
</script>
</body>
</html>

 

Demo


mouseover(<Функция обратного вызова>) — выполняется при наведении курсора мыши на элемент.


mouseout(<Функция обратного вызова>) — выполняется при выходе курсора мыши за пределы элемента. При наведении курсора на ссылку сделаем цвет ссылки красным и выведем сообщение, а при уходе курсора со ссылки — изменим ее цвет на черный и выведем сообщение.


$("a").mouseover(function() {
$(this).css("color", "red");
$("#div1").append("Событие onmouseover" + "<br>");
}).mouseout(function() {
$(this).css("color", "black");
$("#div1").append("Событие onmouseout" + "<br>");
});

 

hover() — позволяет обработать наведение и уход курсора с элемента с помощью одного метода. Имеет следующий формат.
hover(<Функция обратного вызова для события onmouseover>,

      <Функция обратного вызова для события onmouseout>)

 

Переделаем наш предыдущий пример и используем метод hover ().


$("a").hover(function() {
   $(this).css("color", "red");
   $("#div1").append("Событие onmouseover" + "<br>");
}, function() {
   $(this).css("color", "black");
   $("#div1").append("Событие onmouseout" + "<br>");
});

 

Использование метода hover() имеет еще одно преимущество. Если внутри блока существует другой блок, то отдельные функции будут вызываться при входе во внутренний блок, а также при выходе из него. При использовании метода hover() эти перемещения будут игнорироваться (листинг 6.2).

 
Листинг 6.2. Особенности использования метода hover()

<html>
<head>
<title>Особенности использования метода hover()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
   $("#div1").mouseover(function() {
      $("#log1").append("Событие onmouseover<br>");
   });
   $("#div1").mouseout(function() {
      $("#log1").append("Событие onmouseout<br>");
   });
   $("#div2").hover(
      function() {
         $("#log2").append("Событие onmouseover<br>");
      },
      function() {
         $("#log2").append("Событие onmouseout<br>");
      }
   );
});
//-->
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green;
padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</style>
</head>
<body>
<b>Отдельные обработчики:</b><br>
<div class="cls1" id="div1">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log1"></div>
<b>Функция hover():</b><br>
<div class="cls1" id="div2">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log2"></div>
</body>
</html>

 

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

Событие onmouseout

Событие onmouseover

Событие onmouseout

Событие onmouseover

Событие onmouseout

 

Для второго вложенного блока обработчики событий назначены с помощью метода hover (). При том же самом действии мы получим только два события.
Событие onmouseover

Событие onmouseout


Во всех приведенных в этом разделе методах мы еще не разобрались с параметром, который можно им передать. В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата.
function <Название функции>([<Объект event>]) {
// ...

}

 

Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре <Объект event> указана переменная, то через нее можно обратиться к свойствам объекта event.

 

 

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити