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.

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

DOM - Event handler

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>