jQuery Click
The click event is triggered when you click and release the mouse button. Generally a click event triggeres on clicking a link: For example, a link on a thumbnail image cpuld potentially display a larger version of that image when clicked. However, clicking link is not the only way click event is triggered. You can also make any tag on a page respond to an event - even just clicking anywhere on the page.
The click event can also be triggered on links via the keyboard. If you tab to a link, then press the Enter (Return) key, the click event fires.
Another thing to notice is that a click corresponds to an element. The click event is only triggered both the following events happen:
The mouse button is depressed WHILE the pointer is INSIDE THE ELEMENT.
The mouse button is released WHILE the pointer is INSIDE THE ELEMENT.
Let us leanr with a simple example.
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<div id="id1">
id 1 text
</div>
<div id="id2">
id 2 text
</div>
<script>
$('#id1').click(function() {
$("div#id1").text("You Clicked first Line");
});
$('#id2').click(function() {
$("div#id2").text("You Clicked Second Line");
});
</script>
</body>
</html> |
It has two div elements. Depending upon where you click , it will change the test of that div element.
You may like to try this example here.
dblclick Event
When you press and release the mouse button twice, a double-click event triggers. It is an action similar to the on you use to open a folder or file on your desktop. Double-clicking not a widely used web-surfer action, though we may see increase in its usage with the advent of the a lot of desktop functions migrating to cloud. so if you use this event, you should make clear to visitors where they can double-click and what will happen after they do. Also note that a double-click event is the same thing as two click events, so do not assign click and double-click events to the same tag. Otherwise, the function for the click will run twice before the double-click function runs.