Combine hover and click functions (jQuery)?

Question

Can hover and click functions be combined into one, so for example:

click:

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

hover:

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

can they be combined into one function?

Thanks!

score 105 · Accepted Answer · edited Jun 04 '18 at 13:38

105

Use basic programming composition: create a method and pass the same function to click and hover as a callback.

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

Second way: use ~~bind~~on:

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

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

edited Jun 04 '18 at 13:38

saber tabatabaee yazdi

4,404
3
42
58

answered Mar 12 '10 at 10:37

Emil Ivanov

37,300
12
75
90

2

The jquery "on" function is now recommend over using bind. But it works in the same way, just replace "bind" with "on". – Matthew Wilcoxson Jul 13 '12 at 13:30
1

Hint me, please, how I can define what did event (click or hover )happened? – Eugene Shmorgun Jul 28 '13 at 19:34
I am getting some problem because of this. I have to call different functions on both hover and click. But when I click on an element both functions are called at a time. Can anyone tell me how can I solve this problem? – Sarfraz Ahmad Dec 03 '13 at 07:44
1

@SarfrazAhmad This is because before the user is able to click, she has to hover. Maybe you don't need to do anything on click. – Emil Ivanov Dec 03 '13 at 17:16
yeah, but how can i prevent a function to be called on hover when i clicked on an element – Sarfraz Ahmad Dec 03 '13 at 17:25
the second way is not working for me. mouseover instead of hover does work but it causes multiple animation. – fseminario Mar 26 '14 at 16:30
hover will not work..better go with Vergilius's answer..tested and working – Leo the lion Jan 05 '16 at 07:38

score 29 · Answer 2 · answered Dec 09 '13 at 09:57

29

Use mouseover instead hover.

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

answered Dec 09 '13 at 09:57

Vergilius

291
3
3

score 9 · Answer 3 · 2010-03-12T10:39:28.260

9

$("#target").hover(function(){
  $(this).click();
}).click(function(){
  //common function
});

edited Mar 12 '10 at 10:39

answered Mar 12 '10 at 10:32

score 9 · Answer 4 · answered Mar 12 '10 at 10:55

You can use .bind() or .live() whichever is appropriate, but no need to name the function:

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

or if you were doing this on lots of element (not much sense for an IE unless the element changes):

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

Note, this will only bind the first hover argument, the mouseover event, it won't hook anything to the mouseleave event.

score 1 · Answer 5 · answered Mar 12 '10 at 10:37

1

var hoverAndClick = function() {
    // Your actions here
} ;

$("#target").hover( hoverAndClick ).click( hoverAndClick ) ;

answered Mar 12 '10 at 10:37

St.Woland

5,357
30
30

score 1 · Answer 6 · answered Mar 12 '10 at 10:40

1

You could also use bind:

$('#myelement').bind('click hover', function yourCommonHandler (e) {
   // Your handler here
});

answered Mar 12 '10 at 10:40

PatrikAkerstrand

45,315
11
79
94

A heads up for any future readers not already aware 'As of jQuery 3.0, `.bind()` has been deprecated. It was superseded by the `.on()` method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.' http://api.jquery.com/bind/ – Hastig Zusammenstellen Sep 14 '16 at 12:08

score 0 · Answer 7 · answered Mar 12 '10 at 10:36

0

i think best approach is to make a common method and call in hover and click events.

answered Mar 12 '10 at 10:36

Adeel

19,075
4
46
60

score 0 · Answer 8 · answered Feb 23 '17 at 11:41

0

  $("#target").on({
        hover: function(){
           //do on mouse hover
        },  
        click: function(){
            //do on mouse click
        }  
    });

answered Feb 23 '17 at 11:41

Suhani Mendapara

297
1
3
10

When giving an answer it is preferable to give [some explanation as to WHY your answer](http://stackoverflow.com/help/how-to-answer) is the one. – Stephen Rauch Feb 23 '17 at 14:15

Combine hover and click functions (jQuery)?

8 Answers8

Linked