Событие на :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>дивчег</div>
<script>
document.body.addEventListener('click', function(e){
alert( "clicked on : "+e.target.tagName );
}, false);
</script>
нет, нельзя. |
спасибо за ответ)
а, жаль...счастье было так близко...придеться придумывать другой способ реализации. |
chernozor,
Через Гугл Оповещения эту тему нашёл? |
Цитата:
|
chernozor,
Ясно, я думал ты автор этого говноблога. Просто есть такая "шибко вумная" техника: пишется статья, потом через Гугл Оповещения отслеживаются темы на форумах со схожими названиями, где автор срёт ссылками на свой блог. Но ты ведь не такой, правда? |
Спасибо за ваш комментарий
Да, действительно, я написал эту статью, потому что не нашёл ответа в рунете на данный ответ.
Единственное что выдал поисковик - этот пост на этом форуме, ответа на который до сих пор нет. Я всего лишь предложил свой вариант решения этой задачи, который действительно работает. Или у вас, дорогой друг, есть претензии к коду? Об остальных ваших мыслях, я прошу оградить нас. Спасибо. |
Цитата:
Цитата:
в теории теперь элементарно решается через css pointerevent |
Я и предложил pointer-events который и описал в своей заметке
Используем свойство pointer-events
На элемент, в котором находится искомый псевдоэлемент, вешаем свойство pointer-events: none, а на сам псевдоэлемент pointer-events: all. Это не ложЬ(мягкий знак). Тема висит 3 года, никто не удосужился ответить человеку на вопрос. |
Цитата:
|
Цитата:
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:
|
Цитата:
Т.ч. пока ничего нового.
<!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, ну больше никак не получится сделать, только так.
|
Цитата:
Увы и ах, но pointer-events не является решением. PS. Ссыль я удалил. |
Цитата:
Внештатные решения типично требуют кода больше, чем дополнения через скрипт новых элементов, покрывающих нужные старые. |
так можно,только тут не определишь был ли это клик по :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>
|
Endy,
дык спозиционируй псевдо точно над :after По идее все параметры размера и положения можно считать из computedStyle |
Цитата:
Напоминаю вопрос темы Цитата:
|
| Часовой пояс GMT +3, время: 16:37. |