ドキュメント

Events/click

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

click( )

Triggers the click event of each matched element.
Causes all of the functions that have been bound to that click event to be executed.
Examples:

To trigger the click event on all of the paragraphs on the page:

$("p").click();

NameType

click( fn )

Binds a function to the click event of each matched element.
The click event fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:
  • mousedown
  • mouseup
  • click
Arguments:
fnFunction
A function to bind to the click event on each of the matched elements.

Return 'false' or invoke eventObject.preventDefault() to cancel event propagation. This prevents the browser's default action (such as navigation on a link).

function callback(eventObject) {
  this; // dom element
}
Examples:

To hide paragraphs on a page when they are clicked:

    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

  });
  </script>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
</head>
<body>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
</body>
</html>

NameType