Как назначиь click на текст который в :after/:before?

Question

[Капитан Какао]

Всем привет, сейчас пилю простое поп ап окошко для сайта.
Так вот, мне не охота для крестика (закрытие окна) делать отдельный div или span, я запихнул его в :after

Так вот, как мне назначить событие click не на всё окно, а только на его первоэлемент :after ? И вообще реально ли это?

Для наглядности вот код: jsfiddle.net/t3do8rjs

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

Answer 1

[Владимир]

если сильно хочется то можно....
не совсем честно - но работает
= err -ref -->> например так : https://jsfiddle.net/t3do8rjs/

Извините..., не смог получить правильную ссылку
поправьте скрипт
-----------------------
$('.popUp').click(function(){
if (this.offsetWidth - event.offsetX < 0) {
$('.popUp').addClass('close');
}
});

нашел. пример здесь :
https://jsfiddle.net/t3do8rjs/1/

Comments

[Капитан Какао]

вы ссылку туже самую кинули)

[Капитан Какао]

TroubleInThat благодарю за интересный пример. Ещё бы хотелось понять как он работает, я просто js только начинаю изучать, и вот эта часть кода " (this.offsetWidth - event.offsetX < 0)" для меня не совсем ясна. Как оно понимает что нужно срабатывать именно по тому, что прописано в after ?

[Капитан Какао]

Виталий Инчин ☢: у меня работает)

[Владимир]

Rad Cor: выражение "if (this.offsetWidth - event.offsetX < 0)"

"this" - это ссылка на текущий div по которому кликнули мышкой.
"this.offsetWidth" - ширина этого div.
"event" - объект описывающий событие которое произошло.
"event.offsetX" - место на экране - по горизонтали, где произошло событие - т.е. куда вы кликнули мышкой.

Соответственно проверка состоит в том, был ли клик мышкой правее нашего div.

[Капитан Какао]

TroubleInThat: ух ты, вроде понял) Спасибо.

Answer 2

[littleguga]

Нельзя. :after/:before не относятся к DOM дереву, поэтому браузер не может определить события, относящиеся к ним.
Решение TroubleInThat имеет место быть, но это костыль и не стоит того. Лучше и правильнее сделать отдельный div/span для нужного блока.

Comments

[Владимир]

littleguga - вы можете объяснить.., почему все-таки нельзя?
пример работает..
операция click - определяется. - т.е. клик на объекте after определяется как клик на базовом объекте
костыль вполне рабочий.

Выносить в отдельный "div\span" - да, в этом конкретном случае можно..

у меня есь реальная ситуация - набор вложенных тегов в небольшом блоке "tag cloud"- и нужно уметь их удалять по схеме : удалили родителя- нужно удалить и его детей
(т.е. по сути дерево, но без отступов..) - если один элемент описать несколькими частями - на экране скорее всего будут отрываться "Х" от основного тега..
Образец обработчика прекрасно работает на такой задаче.
А какие могут возникнуть проблемы ?

[littleguga]

TroubleInThat: Нельзя, потому что псевдоэлементы не относятся к dom-дереву, браузер "как бы пририсовывает" их к родительскому элементу. По сути их не существует, поэтому js не может к ним цепляться. Костыли - всегда хуже, чем нормальное решение, потому что они костыли.
Решение работает, потому что там сравниваются координаты мышки и самого блока. Это лишние вычисления -> говнокод.
Зачем писать i++, а не
j = i + 1; i = j.

[littleguga]

TroubleInThat: проблемы - что это костыль и не везде псевдоэлементы обрабатываются одинаково, кто знает, что может вылезти в IE, например.
Про теги:

<div id="tag-13" data="Это текст моего тега" class="tag">
            <div class="tag-text">
                Это текст моего тега
            </div>
            <div class="tag-close" data-id="tag-13">
                здесь будет крестик, вставленный через :after
            </div>
        </div>

И закрывать облако с тэгом уже по tag-13

[Владимир]

Спасибо. я понял. Вы еще учитесь судя по примеру разметки...
я думал что действительно что то не понимаю.

[littleguga]

TroubleInThat: а что Вам не нравится? Поясните.

[littleguga]

TroubleInThat:

<span><a id="post_tag-check-num-0" class="ntdelbutton" tabindex="0">X</a>&nbsp;codingapes</span>

Так реализовано на WP, не сильно отличается от моего примера, учитывая, что Вам нужен псевдоэлемент.

[Владимир]

Обидно..
долго писал и все пропало

попробую еще.

1. Вы приводите базовый пример, выше, с разметкой, и непонятно зачем прописывает там атрибуты "data-**" - они в примере не несут никакого смысла.
2. Ваша разметка включает 3 элемента. : div и еще 2 вложенных div, хотя для внешнего оформления (там кстати как-то нужно еще и картинку вывести..) -- достаточно 1 элемента:

Имя тега

и в CSS указать что это inline - блок, что у него есть фоновый рисунок - "х" выравненный вправо, и задать padding справа на размер рисунка "х".
Все.

Обработка клика - я в самом начале написал пример - вы знаете размер блока, размер "фонового рисунка" - если кто то туда кликнет - да, тогда будет "говнокод" с расчетом куда кликнули Ж на текст или на рисунок.

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

Если все одиночные то все просто :
Имя тега

если нужно реализовать вложенность и потом ее обрабатывать ( читать из БД и потом назад возвращать в БД, переходить на элементы исходного дерева, удалять элементы и группы вместе с их "детьми") нудно построить какую то системную разметку.
Например что то похожее на :

www.cssdesk.com/7Mbc6

Если вам кажется что много "пустых SPAN", избыточных - попробуйте такую многоуровневую систему вложенности преобразовать в JSON == а потом обратно - в HTML - тогда будет понятнее.

Может я в чем то ошибся в разметке..
но это где то близко к цели, которую я описывал для "облако тегов"

там - же средствами CSS организовано "при наведении мышки посветить тег и его детей"

------------------
Продолжим.
По клику на текст что то нужно выполнить.
По клику на крестик - нужно удалить тег и его детей.

Навешиваем на "cloud-item" обработчик "click"
Как он будет выглядеть :

var blablaClick = function(){

// this - это элемент на котором кликнули..

if (this.offsetWidth - event.offsetX < 20 { // до рисунка, на тексте
alert('any manipulation with node=' + this.id ) // Показываем ИД кликнутого элемента
// или что то с ним делаем....
}
else{
$(this).parent().remove(); // удаляем его и его обертку
}
}

-------------------------------------
Ну как то так..
В этом варианте - не был использован :after
Если его использовать - можно будет изменить внешний вид курсора
при наведении на "х" - но это уже бантики..

Может для кого то это будет интересно.. и пригодится.

littleguga - вы можете предложить что то боле функциональное и работающее ?
если да - буду благодарен, и точно использую в своих задачах.

[littleguga]

TroubleInThat: изначально в вопросе речь шла о простых элементах, без вложенности. Определение клика через координаты - костыль. Это не есть хорошее решение. вот решение IE8+ без jquery

[Капитан Какао]

littleguga: но в вашем примере идёт обработка отдельного span который выделен под крестик (закрытие).
А суть моего вопроса было в том, как обойтись без этого, то есть что бы не создавать отдельный тег для крестика.

[littleguga]

Rad Cor: не надо без этого обходиться, пожалуйста. Вычисление клика по крестику через координаты мышки - говнокод. Не страшно добавить по 1 span на каждый элемент для крестика, даже если тысяча элементов.

[Капитан Какао]

littleguga: просто я писал своё попап окошко, и там не скрипт добавляет обёртку окна, а в ручную нужно в html её вставлять, и там у меня просто один div а него уде вставляется необходимый контент, и этот спан с крестиком только мешает)
Но я уже понял, что обходится без спана под закрывачку - не нужно)
Научусь, как скриптом оборачивать контент при клике и всё ок))

Главное, что я узнал ответ на свой вопрос)

[littleguga]

Rad Cor: покажите код - помогу.

[Капитан Какао]

Rad Cor: ну сама структура окна элементарная: jsfiddle.net/911o972u
Оно может быть любого размера (резиновое, но всегда будет оставаться по центру, это всё на css сделано)

Хотелось бы, что бы работало на странице таким образом.

Я пишу ссылку <a href="#wind1">Ссылка для вызова окна 1</a>
И вот такой блок

<div class="content" id="wind1">Тут любой контент</div>

А скрипт уже берёт и оборачивает div с классом .content в оболочку, в итоге выходит так:

<div class="popUp">
    <div class="close">✖</div>
    <div class="content" id="wind1">
        Тут любой контент
    </div>
</div>
<div class="ov"></div>

Ну и закрываться оно должно по клику на крестик или по фону, то есть диву с классом .ov
Ну и конечно было бы круто, что бы можно на одной странице создавать сколько угодно окошек и они все работали, что бы не нужно было для каждого отдельно инициализацию писать id, и так далее.

[littleguga]

Rad Cor: IE8+, без jquery. Для нескольких модальных окон - советую писать не своё решение, а взять jquery/bootstrap. Ибо смысла самому пилить draggable и прочие вещи - мало.

Теперь для генерации окошка достаточно примерно такого цикла

$data = [...]; //массив с информацией об окошках
foreach($data as $win_id => $win){
    echo '<a href="#wind'.%24win_id.'">'.$win["name"].'</a>';
}

[littleguga]

Rad Cor: хотя можно для достижения эффекта движения модальных окошек - совместить с этим. Но у меня сейчас, к сожалению нет времени.

Answer 3

[Виталий Инчин ☢]

Без понятия, это ли имел в виду TroubleInThat, но можно сделать так, конкретно для вашего примера:

$('.popUp').click(function(e){
 if(
   e.clientX > $(this).offset().left + $(this).outerWidth() 
   //Ваш :after находится за пределами .popUp.
   //При клике смотрим текущие координаты мыши 
   //Если она за пределами .popUp, то следовательно - клик произошел по псевдоэлементу
 ){
   $('.popUp').addClass('close');
 }
});

Но вообще, это костыль и гораздо правильнее использовать обычные элементы.

Comments

[Капитан Какао]

Если она за пределами .popUp, то следовательно - клик произошел по псевдоэлементу

А если клик был за границей .popUp, но не там где "закрыть" а с кажем в противоположном углу, как оно понимает, что закрыть нужно именно там где текст "закрыть" ?) Не догоняю

Но вообще, это кривой и косой способ.

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

[Виталий Инчин ☢]

Rad Cor: Если клик произошел за пределами и не по :after, то он вообще не касается .popUp - он где-то вне него был.

[Капитан Какао]

Виталий Инчин ☢: понял, спасибо.

[Владимир]

Я, если честно, плохо понимаю ответы Виталий Инчин ☢ типа Но вообще, это кривой и косой способ."

это как то из серии "нахвас"
почему он кривой или согнутый.

Зачем показывать себя крутым перцем ?

если у вас есть аргументы - покажите их.
объясните как это работает..
и как нужно правильно работать в такой ситуации.

что - в лом?
круче пукнть ?

Покажите как на ваш взгляд лучше и правильнее реализовать эту задачу или подобные.
и тогда я вам тоже скажу спасибо..
.. и точно.. не буду в следующий раз вас "хамкать.." :)

[Виталий Инчин ☢]

TroubleInThat: это слепая констатация факта.

Зачем показывать себя крутым перцем ?

если у вас есть аргументы - покажите их.
объясните как это работает..
и как нужно правильно работать в такой ситуации.

Я бы никогда не стал использовать псевдоэлементы для даже самого мельчайшего функционала. Это решение кривое и косое по той причине, что нигде в спецификации нет четкого указания, что клик по псевдоэлементу вообще должен засчитываться, как клик по его родителю, ведь он даже частью DOM не является. Этот способ целиком и полностью держится на «О, у меня работает».

[Виталий Инчин ☢]

TroubleInThat:

Я, если честно, плохо понимаю ответы Виталий Инчин ☢

О..., а я об ваши ответы вообще голову сломал. К примеру:

не совсем честно - но работает
= err -ref -->> например так : https://jsfiddle.net/t3do8rjs

Извините..., не смог получить правильную ссылку
поправьте скрипт/

Что за err -ref? Почему ссылка идентична ссылке, данной тс. Почему и откуда вы не смогли получить ссылку, зачем нам об этом знать?

Ну и самое непонятное:

нашел. пример здесь :

...Что значит Нашел? Его кто-то потерял?

[Владимир]

Виталий Инчин ☢: Нет. не понимаю, честно.
Ни кто сейчас не говорит, что реально можно отработать "клик" по псевдоэлементу.
но я программирую - и понимаю как этот псевдоэлемет будет себя вести.
Почему мне нельзя использовать мои знания для реализации задачи

Я могу вынести этот псевдоэлемент за пределы Элемента или внутрь него..
Это мой дизайн - но обработка действий - это моя задача.

Что нельзя потратить 10 мс для IF ?
Но CSS - тоже хавет ресурс процессора = и как то мне кажется - круче чем JS

[Владимир]

По сути - я предпочитаю "впихнуть" псевдо - внутрь элемента - чтобы работать с одной единицей,
и затем считать разницу - в моем исходном примере сравнивать не с 0 а с минус 20 = размер рисунка - и все прекрасно работает насколько я знаю - везде..
Если не так = скажите где не будет или не работает такая схема ? - я проверю и наверное что то придумаю.. как и все программеры.

[Владимир]

Виталий Инчин ☢: да .согласен.
там полный брдк

просто ситуация сложилась так, что я много раз ЧИТАЛ jsfiddle
и игрался с ним - но никогда у меня не возникало желаний поделиться результатом..
В этот раз я попробовал..
ну с первого раза не получилось..
потом еще раз попробовал
и дал ссылку на работающий пример.

Я ведь не злой.. хотел помочь человеку..
но кто то сказал что нельзя..
Ну я как то там возмутился и показал ка можно...
потом начался базар на уровне теории.
а потом непонятно.. то-ли мой пример работает - то ли нет.. и можно ли так делать.

Я и заинтересовался - почему все говорят что так нельзя..
Второй день все обсуждается.. все говорят нельзя.

Но у топикстартера - все ок. работает.
что то в мире не так.

[Владимир]

Виталий Инчин ☢:
специально для вас.
я ведь не мастер по "делению своими знаниями"
Только пробую..

--------------------------------
Извините..., не смог получить правильную ссылку
поправьте скрипт/
-- и далее код - для топик стартера = что - плохой код ?

=== я приготовил пример
Что за err -ref? Почему ссылка идентична ссылке, данной тс. Почему и откуда вы не смогли получить ссылку, зачем нам об этом знать?

-- да согласен. Тому кто пришел потом - не ясно.
-- я изначально "исправил код, проверил - и отправил по сути ту-же исходную ссылку
---- НУЖНО БЫЛО нажать UPDATE - и отправить НОВУЮ ССЫЛКУ - это моя ошибка.

Ну и самое непонятное:
нашел. пример здесь : == ну.. Да ладно..
== я нашел "UPDATE" b lfk НОВУЮ ССЫЛКУ с примером решения.

Согласен с вами - что не очень красивый старт..
Первый ответ - фигня. Потом разборки... портом еще разборки..
Ну может так и нужно.. Как то учиться - делиться знаниями.
?

[Виталий Инчин ☢]

TroubleInThat: на счет вашего примера:

И это ведь даже в теории должно быть так, ведь вы берете event из воздуха (а так можно делать только в стареньких IE), да и нету у объекта события свойства offsetX, на сколько знаю.

На будущее: Лучше просто заменить ссылку в вопросе и нажать Уведомить подписчиков. :)