- jQuery 2.0 Development Cookbook
- Leon Revill
- 425字
- 2021-07-16 12:25:31
Detecting element clicks
Having the ability to detect if a user has clicked on elements other than buttons can provide additional flexibility to your web application. You can attach click events to any HTML elements, just as we did with the buttons in the previous recipe.
Getting ready
To work through this recipe, we are first going to need a blank HTML page named recipe-2.html, the same as in the other recipes. Remember that you need to have the latest version of jQuery downloaded and easily accessible on your computer so that it can be included in recipe-2.html.
How to do it…
To understand how you can detect user clicks on elements other than buttons, perform the following steps:
- Add the following HTML to the
recipe-2.htmlpage you have just created. This HTML creates a very basic web page with an input, an anchor, and a division element.<!DOCTYPE html> <html> <head> <title>Chapter 2 :: jQuery Events</title> <script src="jquery.min.js"></script> <script> </script> </head> <body> <a href="#">Link 1</a> <input type="text" name="input1" /> <div class="clickme">Click Me!</div> </body> </html> - Within the script tags in the head tag of the HTML page we just created, add the following JavaScript code. This JavaScript code uses two different methods of attaching click event handlers to three DOM elements.
$(function() { $('a').click(function(){ alert("You have clicked a link!"); }); $('body').on('click', 'input[type="text"]', function(){ alert("You have clicked a text input!"); }); $('.clickme').click(function(){ alert("You have clicked a division element"); }); }); - Ensure that all the changes have been saved and then open
recipe-2.htmlin a browser. When you click on any of the elements, you will be presented with a different JavaScript alert, demonstrating that each of these click events are being caught by the event handlers we created earlier in the recipe.
How it works…
We can select DOM elements using their tag names, such as a to select a link, and then use the .click() or .on() functions to attach a click event handler, as shown in the following code snippet. We can also use the CSS selector input[type="text"] to select all text inputs on the page.
$('.clickme').click(function(){
alert("You have clicked a division element");
});
The preceding jQuery code attaches a click event to each DOM element with the .clickme class. These elements can be any DOM elements such as divs, buttons, links, inputs, and text areas. This gives the jQuery developer the flexibility to be able to interpret user interactions across all page elements.
See also
- Detecting button clicks
- Detecting key press events on inputs