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!

saber tabatabaee yazdi · Accepted Answer · 2018-06-04 13:38:22Z

107

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 4, 2018 at 13:38

saber tabatabaee yazdi

4,9953 gold badges53 silver badges63 bronze badges

answered Mar 12, 2010 at 10:37

Emil Ivanov

37.8k12 gold badges78 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Matthew Wilcoxson Over a year ago

The jquery "on" function is now recommend over using bind. But it works in the same way, just replace "bind" with "on".

Eugene Shmorgun Over a year ago

Hint me, please, how I can define what did event (click or hover )happened?

Sarfraz Ahmad Over a year ago

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?

Emil Ivanov Over a year ago

@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.

Sarfraz Ahmad Over a year ago

yeah, but how can i prevent a function to be called on hover when i clicked on an element

|

Vergilius · Accepted Answer · 2013-12-09 09:57:16Z

30

Use mouseover instead hover.

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

answered Dec 9, 2013 at 9:57

Vergilius

3013 silver badges3 bronze badges

Comments

score 9 · Accepted Answer · 2010-03-12 10:39:28Z

9

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

edited Mar 12, 2010 at 10:39

answered Mar 12, 2010 at 10:32

user241244

Comments

Nick Craver · Accepted Answer · 2010-03-12 10:55:21Z

9

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.

answered Mar 12, 2010 at 10:55

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

St.Woland · Accepted Answer · 2010-03-12 10:37:03Z

1

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

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

answered Mar 12, 2010 at 10:37

St.Woland

5,42732 silver badges30 bronze badges

Comments

PatrikAkerstrand · Accepted Answer · 2010-03-12 10:40:19Z

1

You could also use bind:

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

answered Mar 12, 2010 at 10:40

PatrikAkerstrand

45.8k12 gold badges82 silver badges94 bronze badges

1 Comment

Hastig Zusammenstellen Over a year ago

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.' api.jquery.com/bind

Adeel · Accepted Answer · 2010-03-12 10:36:02Z

0

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

answered Mar 12, 2010 at 10:36

Adeel

19.3k4 gold badges48 silver badges60 bronze badges

Comments

Suhani Mendapara · Accepted Answer · 2017-02-23 11:41:34Z

0

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

answered Feb 23, 2017 at 11:41

Suhani Mendapara

3071 gold badge3 silver badges10 bronze badges

1 Comment

Stephen Rauch Over a year ago

When giving an answer it is preferable to give some explanation as to WHY your answer is the one.

Collectives™ on Stack Overflow

Combine hover and click functions (jQuery)?

8 Answers 8

7 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related