Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property

css
Published on April 20, 2019

The CSS pointer-events property can control whether an element can be a target for pointer (mouse & touch) events.

For example, when a link is clicked with a mouse, it opens up a new page. With pointer-events, you can control whether the link can be clicked with a pointer device or not.

In HTML, pointer-events can have 2 values :

  • auto : This is the default value. Mouse and touch will work on the element.

    #element {
    	pointer-events: auto;
    }
    
  • none : Mouse and touch will not work on the element.

    #element {
    	pointer-events: none;
    }
    

    Note that even though mouse and touch won't work on the element, this doesn't mean that event handlers are disabled for it or they won't be executed. For example one may use the "Tab" keyboard button to reach the element and then press "Enter" to perform a click.

    Another case could be that if a parent element is disallowing pointer events, but a child element is allowing pointer events — here any events meant for the child will pass through the parent and so event handlers on the parent will also be executed as per the case.

Demo

The below link looks normal, but it cannot be clicked with a mouse or touch.

HTML & CSS

<a href="http://usefulangle.com" id="demo-link">http://usefulangle.com</a>
#demo-link {
	pointer-events: none;
}
In this Tutorial