Заметки Вебмастера

Познаём Новые Технологии

работаем с jQuery

Вешаем событие .click() на псевдоэлементы :before или :after (jQuery)

Реализация события (event) на псевдо элемент :before(:after) с помощью jQuery

Тоже задались вопросом «Как повесить клик на псевдо-элемент?»

jQuery не поддерживает прямое обращение к псевдоэлементами, как, например, к простым html-элементами, потому что они находятся за пределами DOM`a.

Самый простой и современный способ — воспользоваться помощью css свойства pointer-events.
На элемент, в котором находится искомый :before, вешаем свойство pointer-events: none, а на сам псевдоэлемент pointer-events: all.

Попробовать можно на живом примере (вкладка Result):

или создайте файл с именем, например, hello.html, и добавьте в него следующий код

Содержимое файла hello.html

<html>
<head>
    <meta charset="utf-8">
    <title>Click to :before or :after</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style>
        p {
            pointer-events: none;
        }

        p:before {
            content: "+";
            background-color: yellow;
            cursor: pointer;
            pointer-events: all;
        }
    </style>
</head>
<body>
<script>
    $(document).ready(function () {
        $('p').click(function () {
            $('body').append('ycnex<br/>');
        });
    })
</script>
<p>Hello, World!</p>
</body>
</html>

[свернуть]

, , , , ,

Комментарии к заметке "Вешаем событие .click() на псевдоэлементы :before или :after (jQuery)"

  • Кирилл:

    У меня вопрос в JS не силен поэтому, а если мне надо не добавить как тут append, а чтобы произошло определенное действие допустим
    открылась ссылка, что нужно прописать?

  • А как при таком способе повесить разные события отдельно на :after и :before?

    • Разные события на псевдоэлементы .before и .after одного и того же родителя повесить нельзя, т.к. псевдоэлементы не являются DOM объектами. Но вы всегда можете создать два родителя с различными классами и использовать у каждого из них свой псевдоэлемент.

Добавить комментарий

 

Ваш e-mail не будет опубликован. Обязательные поля помечены *