Javascript клик по псевдоэлементу

Обнаруживать событие клика только на псевдоэлементе

Я хотел бы вызвать событие щелчка только для псевдоэлемента (красный бит). То есть я не хочу, чтобы событие щелчка запускалось на синем бите.

Как насчет проверки нажатой позиции? stackoverflow.com/questions/3234977/… — user3080276

Пожалуйста, прочтите мое ранее опубликованное решение здесь. — Amr

Возможно хороший обходной путь ВОТ. — Reza Mamun

@RezaMamun Можете ли вы проверить это и предложить мне, как я могу этого добиться. stackoverflow.com/questions/66923436/… — Husna

10 ответы

Это невозможно; Псевдоэлементы вообще не являются частью DOM, поэтому вы не можете связывать какие-либо события напрямую с ними, вы можете связываться только с их родительскими элементами.

Если у вас должен быть обработчик кликов только в красной области, вы должны создать дочерний элемент, например span , поместите его сразу после открытия

тег, применить стили к p span вместо p:before , и привязать к нему.

Кажется, что в современных браузерах это возможно с разными pointer-events значения для самого элемента и его псевдоэлемента: jsfiddle.net/ZWw3Z/70 — Илья Стрельцын

@Ilya Streltsyn потрясающе — не «правильный» ответ (не сработал бы, если бы вам также нужно было щелкнуть элемент), но блестяще работает для «кнопки закрытия» на div — РоззаА

pointer-events не похоже, чтобы трюк для IE9, согласно jsfiddel, который опубликовал Илья. — Мэтт Сгарлата

@ user393274: IE9 не поддерживает события указателя вне SVG. — BoltClock

@theyuv нет, на этой странице кликабельна вся строка, как слева, так и справа от ссылки. Только сама ссылка имеет другой обработчик кликов, поэтому нажатие на нее не вызывает сворачивание / разворачивание поддерева. — Илья Стрельцын

Собственно, это возможно. Вы можете проверить, была ли позиция щелчка за пределами элемента, так как это произойдет только в том случае, если ::before or ::after был нажат.

В этом примере проверяется только элемент справа, но это должно работать в вашем случае.

span = document.querySelector('span'); span.addEventListener('click', function (e) < if (e.offsetX >span.offsetWidth) < span.className = 'c2'; >else < span.className = 'c1'; >>);

div < margin: 20px; >span:after < content: 'AFTER'; position: absolute; >span.c1 < background: yellow; >span.c2:after

У меня это не работает, текст выделяется, когда я нажимаю на них. Используя Firefox, если это важно (не должно). — Флатер

для firefox: jsfiddle.net/wC2p7/16 . Если вы работаете с вложенными элементами, вам может потребоваться вычислить вложенные смещения соответствующим образом (например, jQuery: $ (e.target) .offset (). Left) — Бебби

Огромное спасибо, мужик, работает. Но в Firefox и других браузерах, совместимых со стандартами, для тестирования, если навести курсор мыши :after ты должен проверить if (e.clientX > span.offsetLeft + span.offsetHeight) поскольку в этих браузерах нет e.offsetX имущество. Скрипка: jsfiddle.net/Noitidart/wC2p7/18 — Нойтидарт

Было бы еще круче, если бы jQuery решил поддерживать $(‘a:after’).on(‘click’, fn) но я действительно не вижу, чтобы это происходило: p — Линус Уннебек

На самом деле это не сработает, если ::before or ::after расположен внутри элемента. — лаконичный бас

On современные браузеры вы можете попробовать использовать свойство css pointer-events (но это приводит к невозможности обнаружения событий мыши на родительском узле):

Когда целью события является ваш элемент «p», вы знаете, что это ваш «p: before».

Если вам все еще нужно обнаруживать события мыши на главном p, вы можете рассмотреть возможность изменения своей HTML-структуры. Вы можете добавить пролет тег и следующий стиль:

Целями события теперь являются как элементы «span», так и «p: before».

Вот список браузеров, поддерживающих события-указатели: http://caniuse.com/#feat=pointer-events

Я не знаю, почему родительский узел. Вы говорите, что если я нажимаю событие на что-то вроде .box: before, то .box не может обнаружить ни одного щелчка? — достопочтенный сэр

Это частично верно: если ваш CSS содержит что-то вроде .box .box: before , то единственный элемент, который все еще поддерживает события, — это p: before. В любом случае помните, что js вернет вам основной элемент .box, поскольку .box: before на самом деле не живет в DOM. — Фасоу

Фактически вы все еще можете обнаруживать события мыши на исходном элементе. Вам не нужно всегда иметь этот набор правил, вы можете просто установить время, чтобы проверить, зависает ли элемент, даже когда есть только его псевдоэлементы, которые действительно получают события-указатели: jsfiddle.net/0z8p5ret Однако это вызовет большое количество перекомпоновок, поэтому, вероятно, будет лучше любой другой способ. — Кайидо

Короткий ответ:

Я это сделал. Я написал функцию для динамического использования для всех маленьких людей .

Длинный ответ:

На это у меня ушло некоторое время, поскольку на странице нет псевдоэлемента. Хотя некоторые из приведенных выше ответов работают в НЕКОТОРЫХ сценариях, ВСЕ они не могут быть динамическими и работать в сценарии, в котором элемент является неожиданным по размеру и положению (например, элементы с абсолютным позиционированием, перекрывающие часть родительского элемента). У меня нет.

//some element selector and a click event. plain js works here too $("div").click(function() < //returns an object psuedoClick(this); //returns true/false psuedoClick(this).before; //returns true/false psuedoClick(this).after; >); 

Как это работает:

Он захватывает высоту, ширину, верхнюю и левую позиции (в зависимости от позиции от края окна) родительского элемента и захватывает высоту, ширину, верхнюю и левую позиции (в зависимости от края родительского контейнера. ) и сравнивает эти значения, чтобы определить, где находится псевдоэлемент на экране.

Затем он сравнивает, где находится мышь. Пока мышь находится во вновь созданном диапазоне переменных, она возвращает истину.

Разумно сделать родительский элемент ОТНОСИТЕЛЬНЫМ. Если у вас есть псевдоэлемент с абсолютным позиционированием, эта функция будет работать только в том случае, если он позиционируется на основе размеров родительского элемента (поэтому родительский элемент должен быть относительным . возможно, липкий или фиксированный тоже подойдет . Я не знаю).

function psuedoClick(parentElem) < var beforeClicked, afterClicked; var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10), parentTop = parseInt(parentElem.getBoundingClientRect().top, 10); var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10), parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10); var before = window.getComputedStyle(parentElem, ':before'); var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)), beforeEnd = beforeStart + parseInt(before.width, 10); var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)), beforeYEnd = beforeYStart + parseInt(before.height, 10); var after = window.getComputedStyle(parentElem, ':after'); var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)), afterEnd = afterStart + parseInt(after.width, 10); var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)), afterYEnd = afterYStart + parseInt(after.height, 10); var mouseX = event.clientX, mouseY = event.clientY; beforeClicked = (mouseX >= beforeStart && mouseX = beforeYStart && mouseY = afterStart && mouseX = afterYStart && mouseY ; > 

Клиентская поддержка:

Я не знаю . похоже, что это тупой и иногда любит возвращать auto как вычисленное значение. ЭТО РАБОТАЕТ ХОРОШО ВО ВСЕХ БРАУЗЕРАХ, ЕСЛИ РАЗМЕРЫ УСТАНОВЛЕНЫ В CSS. Итак . установите высоту и ширину ваших псевдоэлементов и перемещайте их только верхним и левым краями. Я рекомендую использовать его на тех вещах, над которыми он не работает. Как анимация или что-то в этом роде. Хром работает . как обычно.

Источник

Как обратиться к псевдоэлемунту after через js?

У меня есть див с псевдо элементом after, я хочу при нажатии на кнопку добавить ему свойство css, как это сделать?

Можно добавлять класс к самому диву.

Кароч к самому псевдоэлементу нельза,но можно в элементе,где :after создать с помощью css свойства content: в котором создать селектор с помощью метода attr(data-название селектора ).то есть получиться например content:attr(data-el); а затем обратиться к нему из js var a = this.dataset.el,т таким макаром сможешь переопределить или добавить новые свойства элементу:after.только так.

мой способ это при нажатии на кнопку в элементе добавлять ему еще один класс и в css указать условие при котором твой псевдоэлемент будет изменяться как только присвоится второй класс и выполнится условие, на бумаге выглядит так:
*HTML*
div

*STYLE*
.first background: red
>
.first.second::after *тут стили*
>
*JS*
let div = document.querySelector(«.first»);
div.addEventListener(‘click’, function () div.classlist.toggle(«second»);
>

способ с классами универсальный и решает множество проблем занимая меньше времени хоть и не выглядит современным чтоли

Войдите, чтобы написать ответ

Как сделать обязательный скролл слайдера при прокрутке страницы?

Источник

Обнаружить только событие клика по псевдоэлементу

Я хотел бы вызвать событие щелчка только на псевдоэлементе (красный бит). То есть я не хочу, чтобы событие щелчка вызывалось синим битом.

14 ответов

Это невозможно; псевдоэлементы вообще не являются частью DOM, поэтому вы не можете привязать события непосредственно к ним, вы можете привязать только их родительские элементы.

Если у вас должен быть обработчик щелчков только в красной области, вы должны создать дочерний элемент, например span , поместите это сразу после открытия

тег, применять стили к p span вместо p:before и привязать к нему.

На самом деле, это возможно. Вы можете проверить, была ли позиция щелчка за пределами элемента, так как это произойдет, только если ::before или же ::after была нажата.

В этом примере проверяется только элемент справа, но это должно работать в вашем случае.

span = document.querySelector('span'); span.addEventListener('click', function (e) < if (e.offsetX >span.offsetWidth) < span.className = 'c2'; >else < span.className = 'c1'; >>);

div < margin: 20px; >span:after < content: 'AFTER'; position: absolute; >span.c1 < background: yellow; >span.c2:after

В современных браузерах вы можете попробовать использовать свойство css указателя-событий (но это приводит к невозможности обнаружения событий мыши на родительском узле):

Когда целью события является ваш элемент «p», вы знаете, что это ваш «p: before».

Если вам по-прежнему необходимо обнаруживать события мыши на главной странице, вы можете рассмотреть возможность изменения структуры HTML. Вы можете добавить тег span и следующий стиль:

Целями событий теперь являются элементы span и p: before.

Вот список браузеров, поддерживающих события указателя: http://caniuse.com/

Короткий ответ:

Я это сделал. Я даже сделал это в чистом javascript и написал функцию для динамического использования для всех маленьких людей там.

Длинный ответ:

Это заняло у меня некоторое время, так как элемент psuedo на самом деле отсутствует на странице. Хотя некоторые из приведенных выше ответов работают в НЕКОТОРЫХ сценариях, они ВСЕ не могут быть как динамическими, так и работающими в сценарии, в котором элемент является неожиданным по размеру и положению (например, элементы с абсолютным позиционированием, перекрывающие часть родительского элемента). Мой нет.

Использование:

//some element selector and a click event. plain js works here too $("div").click(function() < //returns an object psuedoClick(this); //returns true/false psuedoClick(this).before; //returns true/false psuedoClick(this).after; >); 

Как это устроено:

Он захватывает высоту, ширину, верхнюю и левую позиции (в зависимости от положения от края окна) родительского элемента и захватывает высоту, ширину, верхнюю и левую позиции (в зависимости от края родительского контейнера).) и сравнивает эти значения, чтобы определить, где находится элемент psuedo на экране.

Затем он сравнивает, где находится мышь. Пока мышь находится во вновь созданном диапазоне переменных, она возвращает true.

Целесообразно расположить родительский элемент ОТНОСИТЕЛЬНО. Если у вас есть элемент psuedo с абсолютным позиционированием, эта функция будет работать только в том случае, если он позиционируется в зависимости от размеров родителя (поэтому родительский элемент должен быть относительным. может быть, липкий или фиксированный тоже подойдет. я не знаю).

function psuedoClick(parentElem) < var beforeClicked, afterClicked; var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10), parentTop = parseInt(parentElem.getBoundingClientRect().top, 10); var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10), parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10); var before = window.getComputedStyle(parentElem, ':before'); var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)), beforeEnd = beforeStart + parseInt(before.width, 10); var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)), beforeYEnd = beforeYStart + parseInt(before.height, 10); var after = window.getComputedStyle(parentElem, ':after'); var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)), afterEnd = afterStart + parseInt(after.width, 10); var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)), afterYEnd = afterYStart + parseInt(after.height, 10); var mouseX = event.clientX, mouseY = event.clientY; beforeClicked = (mouseX >= beforeStart && mouseX = beforeYStart && mouseY = afterStart && mouseX = afterYStart && mouseY ; > 

Служба поддержки:

Я не знаю. похоже, что он тупой и любит иногда возвращать auto как вычисленное значение. ОЧЕНЬ РАБОТАЕТ В ВСЕХ БРАУЗЕРАХ, ЕСЛИ РАЗМЕРЫ УСТАНОВЛЕНЫ В CSS. Так что. установите свою высоту и ширину на элементах psuedo и перемещайте их только сверху и слева. Я рекомендую использовать это на вещах, с которыми у вас все в порядке, если вы не работаете. Как анимация или что-то. Хром работает. как обычно.

Источник

Jquery как получить доступ к псевдоэлементу :after?

Александр Петров уже написал, что не нужно говнокодить, прописывая правила в атрибут style. Оперируйте классами.

potapovdmtriy: Именно про это вам ит написал @dzhiriki
А теперь вы говорите, что вопрос решился. Чудо.

potapovdmtriy: Атрибут style — это тоже CSS. Давайте вы лучше почитаете побольше о CSS, а не будете задавать странные вопросы.

Я знаю про style, я имел ввиду внешний файл стилей.

Евгений Петров:
А что, по-вашему, делает метод css()? Читайте документацию.
Написано 11 минут назад
Вот вы написали, извините но не совсем понятно что это означает.
Мне ведь и нужно изменить css, какая разница как добавлением нового класса или добавлением правил.
Извините но может мы просто не поняли друг друга. А так спасибо за ответ.

potapovdmtriy: Разница есть и существенная. Мало того, что есть понятие каскада, так ещё и не всё можно задать в инлайн-атрибутах. Например, keyframes.
Читайте про кро каскад www.w3.org/TR/css-cascade-3/#cascading

И мне не импонирует, когда человек даёт вам верный совет, а вы игнорируете, заявляя, что проблема решилась как бы сама собой, но именно так, как вам и советовали.

Источник