Javascript-форум - Событие на :after

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Событие на :after (https://javascript.ru/forum/dom-window/27646-sobytie-na-after.html)

Цитата:

Сообщение от chernozor

Тема висит 3 года, никто не удосужился ответить человеку на вопрос.

А ты специально зарегился тут, дабы убрать завесу незнания? :D

P.S.
Жду тестовый пример, тут. Не по какой-то ссылке на сторонний ресурс... :no:

Вот вам тестовый пример без jQuery. :)

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Документ без названия</title>
		<style type="text/css">
			.test {
				pointer-events: none;
			}
			.test::after {
				background: red;
				content: '';
				display: block;
				height: 100px;
				pointer-events: all;
				width: 100px;
			}
		</style>
	</head>

	<body>
		<div class="test">Hello world!</div>
	
		<script type="text/javascript">
			document.querySelector('.test').onclick = function() {
				alert('Hello world!');
			};
		</script>
	</body>
</html>

:write: на всякий для ie < 9 пролетает.
https://developer.mozilla.org/en-US/...pointer-events

рони, неужели ими ещё кто-то пользуется? :blink:

Цитата:

Сообщение от Ruslan_xDD

Вот вам тестовый пример без jQuery.

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
.test {
	pointer-events: none;
}
.test::after {
	background: red;
	content: '';
	display: block;
	height: 100px;
	pointer-events: all;
	width: 100px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="test">Hello world!</div>
<script type="text/javascript">
	document.querySelector('.test').onclick = function(e) {
		alert(e.target.tagName);
	};
</script>
</body>
</html>

Аналогичный пример уже был продемонстрирован в самом начале.
http://javascript.ru/forum/dom-windo...tml#post170061
Там же и дан ответ на вопрос темы.

Пока никаких опровергающих примеров я не видел. :no:

ksa, ну больше никак не получится сделать, только так.

Цитата:

Сообщение от ksa

Ты вешаешь событие на элемент, а не на псевдоэлемент.

Согласен, при этом лишается возможность прослушивать события у основного элемента (что не есть гуд).

Увы и ах, но pointer-events не является решением.

PS. Ссыль я удалил.

Цитата:

Сообщение от Gesandte

Собственно и весь вопрос, можно как то повесить событие на данный селектор или нет?

По идее, расчет позиции эл-та(и курсора) и отслеживание события на области
Внештатные решения типично требуют кода больше, чем дополнения через скрипт новых элементов, покрывающих нужные старые.

так можно,только тут не определишь был ли это клик по :before или :after

<style>
    div {
        color: green;
        border: 1px green dashed;
        position: absolute;
    }
    div:after {
        content:"Ы";
        width: 100px;
        height: 100px;
        border: 2px gray solid;
        padding: 5px;
        font-size: 20px;
        position: absolute;
        top: 30px;
        left: 30px;
    }
</style>
<div id="divcheg">дивчег</div>
<script>
    divcheg.onclick = function(e) {
        if ((e.offsetX > this.offsetWidth) || (e.offsetY > this.offsetHeight)) {
            alert(e.type + ' on pseudo element');
        } else {
            alert(e.type + ' on ' + e.target.tagName)
        }
    };
</script>