Псевдо-элементы

Как повесить клик на псевдо-элемент

Если возникла необходимость «повесить» обработчик события «click» на какой либо элемент вёрстки, Вы наверняка воспользуетесь таким кодом:

<script type=»text/javascript»>
container = document.querySelector(‘.container’);
container.addEventListener(‘click’, function (e) {
window.location.href = ‘http://…’;
});
</script>

Но он не будет срабатывать, если речь идёт о псевдо-элементах, таких как :before, :after. Всё дело в том, что псевдо-элемент — это элемент каскадных стилей CSS, который генерируется браузером пользователя «на лету» и он не виден в DOM-модели документа, а следовательно не будет доступен и для javascript.

Существует один хитрый способ, как все-таки добиться желаемого и сделать псевдо-элемент кликабельным.

Приводим следующий код:

<script type=»text/javascript»>
container = document.querySelector(‘.container’);
container.addEventListener(‘click’, function (e) {
if ((e.offsetX > container.offsetWidth) || (e.offsetY > container.offsetHeight)) {
window.location.href = ‘http://…’;
}
});
</script>

Данный код работает по принципу, если клик был бы осуществлен по основному элементу DOM-модели, но за его пределами, что другими словами и означает событие клика по рядом располагающимся объектам основного элемента. Единственный недостаток данного способа в том, что клик будет отрабатываться независимо был ли это клик по :before или :after элементу.