A CSS trick with an effect on JS: pointer-events: none will remove an element from the DOM event tree even if it is in the foreground, which means that if you capture click events, you'll receive the parent. If you are using event.target, you'll save yourself some steps of filtering.
Interesting fact I found out: if you add text nodes via appendChild, some browsers will handle them as own elements inside the DOM event tree.
A CSS trick with an effect on JS:
pointer-events: none
will remove an element from the DOM event tree even if it is in the foreground, which means that if you capture click events, you'll receive the parent. If you are using event.target, you'll save yourself some steps of filtering.Interesting fact I found out: if you add text nodes via
appendChild
, some browsers will handle them as own elements inside the DOM event tree.you need always to double check with js because removing pointer-events: none the element will be targettable even if it is eg. disabled.