Объединить функции наведения и щелчка (jQuery)?

Можно ли объединить функции наведения и клика в одну, например:

нажмите:

$('#target').click(function() {
  // common operation
});

наведите курсор:

$('#target').hover(function () {
    // common operation
});

можно ли их объединить в одну функцию?

Спасибо!


person eozzy    schedule 12.03.2010    source источник


Ответы (6)


Используйте базовую композицию программирования: создайте метод и передайте одну и ту же функцию click и hover в качестве обратного вызова.

var hoverOrClick = function () {
    // do something common
}
$('#target').click(hoverOrClick).hover(hoverOrClick);

Второй способ: используйте bindon:

$('#target').on('click mouseover', function () {
    // Do something for both
});

jQuery('#target').bind('click mouseover', function () {
    // Do something for both
});
person Emil Ivanov    schedule 12.03.2010
comment
Функция jquery on теперь рекомендуется вместо использования привязки. Но это работает точно так же, просто замените bind на on. - person Matthew Wilcoxson; 13.07.2012
comment
Подскажите, пожалуйста, как я могу определить, что произошло событие (щелчок или наведение)? - person Eugene Shmorgun; 28.07.2013
comment
Из-за этого у меня возникают некоторые проблемы. Я должен вызывать разные функции как при наведении, так и при нажатии. Но когда я нажимаю на элемент, обе функции вызываются одновременно. Может ли кто-нибудь сказать мне, как я могу решить эту проблему? - person Sarfraz Ahmad; 03.12.2013
comment
@SarfrazAhmad Это потому, что прежде чем пользователь сможет щелкнуть, он должен навести курсор. Возможно, вам не нужно ничего делать по клику. - person Emil Ivanov; 03.12.2013
comment
да, но как я могу предотвратить вызов функции при наведении, когда я нажимаю на элемент - person Sarfraz Ahmad; 03.12.2013
comment
второй способ у меня не работает. Наведение мыши вместо наведения работает, но вызывает множественную анимацию. - person fseminario; 26.03.2014
comment
наведение не сработает .. лучше воспользуйтесь ответом Вергилия .. проверено и работает - person Leo the lion; 05.01.2016

Используйте наведение мыши вместо наведения.

$('#target').on('click mouseover', function () {
    // Do something for both
});
person Vergilius    schedule 09.12.2013

Вы можете использовать .bind() или .live() в зависимости от того, что подходит, но не нужно называть функцию:

$('#target').bind('click hover', function () {
 // common operation
});

или если вы делали это для большого количества элементов (не имеет большого смысла для IE, если элемент не изменится):

$('#target').live('click hover', function () {
 // common operation
});

Обратите внимание, что это свяжет только аргумент first hover, событие mouseover, и ничего не привяжет к событию mouseleave.

person Nick Craver    schedule 12.03.2010

Вы также можете использовать bind:

$('#myelement').bind('click hover', function yourCommonHandler (e) {
   // Your handler here
});
person PatrikAkerstrand    schedule 12.03.2010
comment
Предупреждение для будущих читателей, которые еще не знают: «Начиная с jQuery 3.0, .bind() устарело. Он был заменен методом .on() для прикрепления обработчиков событий к документу, начиная с jQuery 1.7, поэтому его использование уже не рекомендуется». api.jquery.com/bind - person Hastig Zusammenstellen; 14.09.2016

я думаю, что лучший подход — создать общий метод и вызывать события hover и click events.

person Adeel    schedule 12.03.2010

person    schedule
comment
Давая ответ, желательно дать некоторое объяснение, ПОЧЕМУ именно ваш ответ. - person Stephen Rauch; 23.02.2017