DOM - Click Event (OnClick)
About
1001 ways to handle a the click event.
The click event occurs when the pointing device button is clicked over an element.
The onclick on attribute may be used with most elements.
- The difference between a swipe/drag and a click is the distance traveled by the mouse. See How to make the difference between a Swipe/Drag vs Click/Tap event
Example
Event Listener
The DOM - Event Listener function and preventing the click to navigate away
- The Javascript
var element = document.querySelector('a');
element.addEventListener("click",
function (event) {
event.preventDefault(); // don't navigate away
console.log('Ouch! Stop poking me!');
}
);
- The HTML
<a href="#">Poke me!</a>
Click Position / Location
A click event is a click Pointer event definition and have the following properties:
- MouseEvent.screenX : value based on the pointer position on the screen
- MouseEvent.screenY : value based on the pointer position on the screen
- MouseEvent.clientX : value based on the pointer position within the viewport
- MouseEvent.clientY : value based on the pointer position within the viewport
- The Javascript
document.addEventListener("click",
function (event) {
event.preventDefault(); // don't navigate away
console.log(`(screenX, screenY):(${event.screenX}, ${event.screenY})`);
console.log(`(clientX, clientY):(${event.clientX}, ${event.clientY})`);
}
);
- The HTML
<p style="max-width:300px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. </p>
- Click Anywhere on the document to see the locations of the click
OnClick Event handler Property
document.querySelector('html').onclick = function() {
console.log('Ouch! Stop poking me!');
}
// Equivalent to
var myHTML = document.querySelector('html');
myHTML.onclick = function() {
console.log('Equivalent Alert. Stop poking me!');
}
<p style="border-radius:50%;background:deepskyblue;padding:1rem;display:inline-block">Poke me!</p>
Jquery
- Click method
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
});
- or on
$( document ).ready(function() {
$( "html" ).on( "click", function( event ) {
console.log('Ouch! Stop poking me!');
});
});
<p style="border-radius:50%;background:deepskyblue;padding:1rem;display:inline-block">Poke me!</p>