- 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
- Web前端開發技術：HTML、CSS、JavaScript（第3版）
- Mobile Application Development：JavaScript Frameworks
- Learning Apex Programming
- SpringMVC+MyBatis快速開發與項目實戰
- 架構不再難（全5冊）
- Python編程完全入門教程
- 精通API架構：設計、運維與演進
- SSM輕量級框架應用實戰
- NGINX Cookbook
- Python全棧數據工程師養成攻略（視頻講解版）
- Unity 3D腳本編程：使用C#語言開發跨平臺游戲
- Learning Splunk Web Framework
- Node.js 6.x Blueprints
- Less Web Development Cookbook
- INSTANT LESS CSS Preprocessor How-to