CSS pointer-events

pointer-events allow you to control if an element should become the target of mouse events.

1
2
3
$('h1').on('click', () => {
console.log('click');
});

As expected, when clicking a h1 ‘click’ will log out in the console. However, add the following CSS and the click will have no effect.

1
2
3
h1 {
pointer-events: none;
}

Most pointer event properties apply only to SVG elements, however none, auto and inherit work for html.

Apparently pointer events have been around and supported by most browsers for a long time, however they have only been supported in IE since v11.