.mousedown() JQ Home  <<  Events  <<  .mousedown()

Mousedown event handler.

Description

The .mousedown() method is used to bind an event handler to The JavaScript mousedown event or trigger that event on the specified element.

  • The mousedown event is sent to an element when the mouse pointer is over the element and any mouse button is pressed.
  • You can examine the event object by passing it to the mousedown event handler function to determine which mouse button was pressed. Although browsers use different properties to store this information, jQuery normalizes the which property of the event object so you can reliably use it to retrieve the mouse button pressed:
    • 1 - left button pressed
    • 2 - middle button pressed
    • 3 - right button pressed
  • For 'drag' and 'drop' operations it is generally preferable to use the .click() method for deciding when a 'drag' has begun.

Syntax

Signature Description
.mousedown( )Trigger the mousedown JavaScript event on the specified element.
.mousedown( handler(eventObject) )Bind an event handler to the mousedown JavaScript event.
.mousedown( [eventData ,] handler(eventObject) )Bind an event handler to the mousedown JavaScript event, optionally passing an object of data.

Parameters

Parameter Description Type
handler( eventObject )A function to execute each time the event is triggered.Function
eventDataAn object of data to pass to the event handler.Anything

Return

A jQuery object.

.mousedown( ) Example  Events  <<  Top

Trigger the mousedown JavaScript event on the specified element.

  • This signature is a shortcut for .trigger('mousedown').

In the example below we show a new message in the 'div' element with an id of 'div1' every time the radio button for chicken pie is clicked on, or the division itself is clicked on.

When the radio button is pushed, or the division itself is clicked on we trigger off the mousedown JavaScript event on the 'div1'. This then fires off the $('#div1').mousedown(function(){}) code which outputs the message.

Pie Survey

Which pie do you prefer?:

Select a pie shape: 

div1. Some initial text.



$(function(){
  $('#div1').mousedown(function () {
    $('#div1').append('<code>mousedown</code> JavaScript event triggered.
                       You like Chicken Pie!!<br>');
  });

  $('#chicken').click(function() {
    $('#div1').mousedown();
  });
});


.mousedown( handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the mousedown JavaScript event.

  • This signature is a shortcut for .on('mousedown', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the 'div' element with an id of 'div2' below is hovered over and a mouse button pressed.

When the mouse button is pressed, the mousedown JavaScript event fires off the addText(event) mothod which outputs a message.

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.



$(function(){
  $('#div2').mousedown(addText);

  function addText(event) {
    $('#scrollspan1').append('mousedown 1 **JavaScript event triggered**<br>');
  }
});

div2. Click Here.

We will show a message here.


.mousedown( [eventData ,] handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the mousedown JavaScript event, optionally passing an object of data.

  • This signature is a shortcut for .on('mousedown', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the 'div' element with an id of 'div2' below is hovered over and a mouse button pressed.

When a mouse button is pressed, the mousedown JavaScript event fires off the $('#div2').mousedown({ param1: '#scrollspan2', param2: 'mousedown', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan2', param2: 'mousedown', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.



$(function(){
  $('#div3').mousedown({ param1: '#scrollspan2', param2: 'mousedown 2 ', 
                         param3: '**JavaScript event triggered**<br>' }, addText2);

  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + event.data.param3);
  }
});

div3. Click Here.

We will show a message here.


Related Tutorials

jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events