Как «повесить» клик на псевдоэлемент Программирование

Если возникла необходимость «повесить» обработчик события «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 элементу.

Свяжитесь с нами если у Вас возникли вопросы
или позвоните:
+38 (050) 471-21-14
Vodafone, Украина
+38 (093) 962-16-62
Lifecell, Украина