. hover (…) и on. («зависание» ...) ведут себя по-разному

Используя JQuery, я пытаюсь объединить несколько функций, когда элемент находится в состоянии наведения.

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

Однако у меня возникают проблемы, когда я объединяю две функции, например, так:

$("element").on( "hover", function() {         
    console.log("one");     
}, function() {         
    console.log("two");     
});

Я ожидал, что результат будетone two (which was the case when using .hover) но вместо этого я получаюtwo two.

Может кто-нибудь объяснить, что я делаю неправильно или это ожидаемое поведение и почему?

Reproduced using .hover(...): http://jsfiddle.net/gXSdG/

Reproduced using .on(hover...): http://jsfiddle.net/gXSdG/1/

Ответы на вопрос(2)

Вы просто запутались в том, что происходило, во-первых, нет цепочки функций ни в одном из ваших примеров. API дляhover а такжеon различаются, прочитайте их внимательно, и вот краткий обзор вашей проблемы:

hover принимает один или два аргумента, обе функции. Первый запускается, когда мышь входит, второй - когда мышь уходит.

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

 My Head Hurts28 мая 2012 г., 21:37
+1 спасибо за объяснение, я все еще изучаю JQuery, и я действительно должен был уделить больше внимания документации.
Решение Вопроса

.on() может принимать только 1 функцию, поэтому вы должны опросить переданныйevent чтобы проверить, что это было за событие. Попробуй это:

$("element").on("hover", function(e) {
    if (e.type == "mouseenter") {
        console.log("one");   
    }
    else { // mouseleave
        console.log("two");   
    }
});

Example fiddle

В качестве альтернативы вы можете разделить два события, которые составляютhover() метод -mouseenter а такжеmouseleave:

$("#element").on("mouseenter", function() {
  console.log("one");   
}).on('mouseleave', function() {
  console.log("two");   
});
#element {
  background-color: black;
  height: 100px;
  margin: 100px;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

 My Head Hurts28 мая 2012 г., 21:35
+1 отлично - спасибо большое
 28 мая 2012 г., 21:37
Нет проблем, рад помочь :)
 28 мая 2012 г., 21:41
+1 за точку к правой точке

Ваш ответ на вопрос