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


107

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

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

$(this).unbind('hover');

2
Вы пытаетесь отключить функцию, назначенную событию наведения, или пытаетесь изменить наведение <a> </a>?
Джастин Нисснер,

Чтобы прояснить вопрос Джастина Нисснера, вы пытаетесь удалить события Javascript / DOM или объявления CSS? Последнее - более сложный вопрос.
век 01

Ответы:


214

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

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

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


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

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);
  });

});

Исправление: после просмотра 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
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.