Как сделать, чтобы скрипт работал при нажатии на ::before?

Question

[partyzanx]

Как сделать, чтобы скрипт работал не при нажатии на .steps li, а при нажатии на .steps li:before?

<!- Скрипт при нажатии на перечисленные элементы копирует ссылку плюс айди -->
<script>let buttons = document.querySelectorAll('.steps li, .i2 h2, .i2 h1');

Array.prototype.forEach.call(buttons, function(el) {
        el.addEventListener("click", function(event) {
          let tmp   = document.createElement('INPUT');
          let str = location.protocol + '//' + location.hostname + location.pathname + location.search +'#'+ el.id;
          tmp.value = str; 
          document.body.appendChild(tmp); 
          tmp.select(); 
          document.execCommand('copy');
          document.body.removeChild(tmp); 
        });  
});
</script>

Answer 1

[timokins]

Есть хак для css,

.steps li { pointer-events: none; }
.steps li:before { pointer-events: all; }

Тогда сам элемент для ивента захватываться не будет, а его псевдоэлементы будут.

upd: пример для убедительности
upd2: Что происходит в данном случае? Ваш ивент распространяется и на элемент, и на его псевдоэлементы. С помощью pointer-events мы отключаем срабатывание ивентов на элементе, а на псевдоэлементах оставляем. Таким образом достигаем нужного результата.

Comments

[Ankhena]

js ничего не знает про псевдоэлементы, так что никакого клика не выйдет

[timokins]

Ankhena, js знает про сам элемент. Этого достаточно, чтобы ивент распространялся и на его псевдоэлементы. Работать напрямую с ними js не может, да.

Вот пример:
https://jsfiddle.net/fqhk7dea/

[Ankhena]

timokins, в таком виде я не возражаю ))))))

Answer 2

[Михаил]

Ни как, на то они и псевдоэлементы, доступа к ним из js нет.

Answer 3

[sadieff]

С псевдоэлементом это не пройдет. Вместо before внутри li разместите span и на него уже событие.