.click()S2C Home « Events « .click()

Mouse click event handler.

Description

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

  • The click event is sent to an element when:
    1. The mouse pointer is inside the element and the primary mouse button is pressed down.
    2. The primary mouse button is then released while the mouse pointer is inside the element.
  • For situations where you just need to detect when a mouse buton is pressed it is preferable to use the .keydown()
  • For situations where you just need to detect when a mouse buton is released it is preferable to use the .keyup()

Syntax


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

Parameters


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

Return

A jQuery object.

.click( ) Examplego to top of page Top

Trigger the click JavaScript event on the specified element.

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

In the example below we toggle the pie image with the id of 'pie1' when the user clicks anywhere in the div with an id of 'div14' or clicks the button below.

When the user clicks the button we trigger off the click JavaScript event on the 'div14' element. This then fires off the $('#div14').click(function(){}) code which shows the image.

Alternatively if you just click in the division the click event handler runs without being triggered to toggle the image.

a picture of pie



$(function(){
  $('#btn1').click(function () {
    $('#div14').click();
  });
  $('#div14').click(function () {
    $('#pie1').toggle();
  });
});

Press the buttons below to action the above code:

.click( [eventData], handler(eventObject) ) Examplego to top of page Top


  • This signature is a shortcut for .bind('click', handler).

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

In the example below we show a new message in the 'p' element with an id of 'scrollspan8' each time the 'div' element with an id of 'div16' below is hovered over and the primary mouse button is pressed and released inside this element.

When the primary mouse button is pressed and released inside the element, the click JavaScript event fires off the $('#div16').click({ param1: '#scrollspan8', param2: 'click ', 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: '#scrollspan8', param2: 'click ', 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(){
  $('#div16').click({ param1: '#scrollspan8', param2: 'click ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append(event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

div16. Click Here.

We will show a message here.

go to home page Homepage go to top of page Top