Как мне отменить привязку «зависания» в jQuery?

107

Как мне отменить привязку зависания в jQuery?

Это не работает:

$(this).unbind('hover');
zsharp
источник
2
Вы пытаетесь отключить функцию, назначенную событию наведения, или пытаетесь изменить наведение <a> </a>?
Джастин Нисснер,
Чтобы прояснить вопрос Джастина Нисснера, вы пытаетесь удалить события Javascript / DOM или объявления CSS? Последнее - более сложный вопрос.
век 01

Ответы:

214

$(this).unbind('mouseenter').unbind('mouseleave')

или более лаконично (спасибо @Chad Grant ):

$(this).unbind('mouseenter mouseleave')

Crescent Fresh
источник
42
или $ (this) .unbind ('mouseenter mouseleave')
Чад Грант
нужна ли последовательность для mouseenter после того, как mouseleave?
sanghavi7 05
70

На самом деле, документация jQuery имеет более простой подход, чем приведенные выше примеры цепочки (хотя они будут работать нормально):

$("#myElement").unbind('mouseenter mouseleave');

Начиная с jQuery 1.7, вы также можете использовать $.on()и $.off()для привязки событий, поэтому для отмены привязки события зависания вы должны использовать более простой и аккуратный вариант:

$('#myElement').off('hover');

Имя псевдо-события «hover» используется как сокращение для «mouseenter mouseleave», но в более ранних версиях jQuery обрабатывалось иначе; требуя, чтобы вы явно удалили каждое из буквальных имен событий. Использование $.off()now позволяет отбрасывать оба события мыши с использованием одного и того же сокращения.

Изменить 2016:

По-прежнему популярный вопрос, поэтому стоит обратить внимание на то, что @ Dennis98 в комментариях ниже, что в jQuery 1.9+ событие "hover" устарело в пользу стандартных вызовов "mouseenter mouseleave". Итак, ваше объявление привязки события теперь должно выглядеть так:

$('#myElement').off('mouseenter mouseleave');

Фил Уилер
источник
4
У меня jQuery 1.10.2, и $.off("hover")он не работает. Однако использование обоих событий отлично работает.
Alexis Wilke
Стоит отметить, что, когда указано несколько аргументов фильтрации, все предоставленные аргументы должны совпадать, чтобы обработчик событий был удален. Я также отмечаю, что в документации API jQuery указано, что метод .off () удаляет обработчики событий, которые были прикреплены с помощью .on (). Означает ли это, что это относится ТОЛЬКО к событиям, добавленным с помощью .on (), я не уверен. Но этого не должно быть.
Фил Уиллер
@AlexisWilke Ага, его удалили в версии 1.9, посмотрите последнюю ссылку ..;)
Dennis98 08
1
@ Dennis98 - Вы только что говорите о том, что хак jQuery при наведении курсора переносится на deprecated.js, верно? привязка события $ .off () по-прежнему доступна в более поздних версиях jQuery.
Фил Уиллер 08
Правильно. :) $.off()все еще существует, это рекомендуемый метод отвязывания событий в настоящее время. Итак, сейчас вам нужно писать $(element).off("mouseenter mouseleave");.
Dennis98 08
10

Отвязать mouseenterи mouseleaveсобытия по отдельности или разрывания всех событий элемента (ов).

$(this).unbind('mouseenter').unbind('mouseleave');

или

$(this).unbind();  // assuming you have no other handlers you want to keep
tvanfosson
источник
4

unbind () не работает с жестко запрограммированными встроенными событиями.

Так, например, если вы хотите отменить привязку события наведения курсора мыши <div id="some_div" onmouseover="do_something();">, я обнаружил, что $('#some_div').attr('onmouseover','')это быстрый и грязный способ добиться этого.

Джейтоп
источник
4

Другое решение - .die () для событий, которые связаны с .live () .

Например:

// attach click event for <a> tags
$('a').live('click', function(){});

// deattach click event from <a> tags
$('a').die('click');

Здесь вы можете найти хорошую ссылку: Изучение jQuery .live () и .die ()

(Извините за мой английский: ">)

Бриганти
источник
2

Все, что делается при наведении курсора, привязано к свойству mouseover и mouseout. Я бы привязал и отвязал ваши функции от этих событий индивидуально.

Например, допустим, у вас есть следующий HTML-код:

<a href="#" class="myLink">Link</a>

тогда ваш jQuery будет:

$(document).ready(function() {

  function mouseOver()
  {
    $(this).css('color', 'red');
  }
  function mouseOut()
  {
    $(this).css('color', 'blue');
  }

  // either of these might work
  $('.myLink').hover(mouseOver, mouseOut); 
  $('.myLink').mouseover(mouseOver).mouseout(mouseOut); 
  // otherwise use this
  $('.myLink').bind('mouseover', mouseOver).bind('mouseout', mouseOut);


  // then to unbind
  $('.myLink').click(function(e) {
    e.preventDefault();
    $('.myLink').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
  });

});
Bendewey
источник
Исправление: после просмотра jquery src hover фактически привязан к mouseenter / mouseleave. Вам следует поступить так же.
bendewey
2

Вы можете удалить определенный обработчик событий, который был прикреплен on, используяoff

$("#ID").on ("eventName", additionalCss, handlerFunction);

// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);

Используя это, вы удалите только handlerFunction
Еще одна хорошая практика - установить nameSpace для нескольких прикрепленных событий.

$("#ID").on ("eventName1.nameSpace", additionalCss, handlerFunction1);
$("#ID").on ("eventName2.nameSpace", additionalCss, handlerFunction2);
// ...
$("#ID").on ("eventNameN.nameSpace", additionalCss, handlerFunctionN);

// and to remove handlerFunction from 1 to N, just use this
$("#ID").off(".nameSpace");
Халаем Анис
источник
0

Я обнаружил, что это работает как второй аргумент (функция) для .hover ()

$('#yourId').hover(
    function(){
        // Your code goes here
    },
    function(){
        $(this).unbind()
    }
});

Первая функция (аргумент для .hover ()) - наведение курсора мыши и выполнит ваш код. Второй аргумент - mouseout, который отвяжет событие наведения от #yourId. Ваш код будет выполнен только один раз.

Фоппе
источник
1
Разве это $.unbind()само по себе не удалит все события из этого объекта? В таком случае такие вещи, как ваши $.click()мероприятия, теперь потерпят неудачу, верно?
Alexis Wilke