Если возникла необходимость «повесить» обработчик события «click» на какой либо элемент вёрстки, Вы наверняка воспользуетесь таким кодом:
var container = document.querySelector('.container');
container.addEventListener('click', function (e) {
window.location.href = 'http://example.com/';
});
Но он не будет срабатывать, если речь идёт о псевдо-элементах, таких как :before, :after. Всё дело в том, что псевдо-элемент — это элемент каскадных стилей CSS, который генерируется браузером пользователя «на лету» и он не виден в DOM-модели документа, а следовательно не будет доступен и для javascript.
Существует один хитрый способ, как все-таки добиться желаемого и сделать псевдо-элемент кликабельным.
Приводим следующий код:
var container = document.querySelector('.container');
container.addEventListener('click', function (e) {
if ((e.offsetX > container.offsetWidth) || (e.offsetY > container.offsetHeight)) {
window.location.href = 'http://example.com/';
}
});
Данный код работает по принципу, если клик был бы осуществлен по основному элементу DOM-модели, но за его пределами, что другими словами и означает событие клика по рядом располагающимся объектам основного элемента. Единственный недостаток данного способа в том, что клик будет отрабатываться независимо был ли это клик по :before или :after элементу.