How can I only detect click event on pseudo-element

0 votes

My code is:

p {
    position: relative;
    background-color: blue;
}

p:before {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;
}

I would like to trigger a click event only on the pseudo-element (the red bit). That is, I don't want the click event to be triggered on the blue bit.

Oct 7, 2020 in Java-Script by kartik
• 37,520 points
25,376 views

1 answer to this question.

0 votes

Hello @kartik,

This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it.

Hope it helps!!

Thank you!!

answered Oct 7, 2020 by anonymous
• 82,840 points

Related Questions In Java-Script

0 votes
1 answer

jQuery AJAX fires error callback on window unload - how do I filter out unload and only catch real errors?

Hello, In the error callback or $.ajax you have three ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,840 points
4,220 views
0 votes
1 answer

How can I rename a database column in a Ruby on Rails migration?

Hello @kartik, Try using this: rename_column :table, :old_column, :new_column You'll ...READ MORE

answered Jul 24, 2020 in Java-Script by Niroj
• 82,840 points
1,606 views
0 votes
1 answer

How can I check the existence of an element in jQuery?

Hello @ Arpit In JavaScript, everything is 'truthy' or ...READ MORE

answered Sep 8, 2020 in Java-Script by Niroj
• 82,840 points
861 views
0 votes
1 answer

How do I disable right click on my web page?

Hello @kartik, You can do that with JavaScript ...READ MORE

answered Sep 23, 2020 in Java-Script by Niroj
• 82,840 points
3,065 views
0 votes
1 answer

How to access PHP var from external javascript file?

Hello @kartik, You don't really access it, you ...READ MORE

answered Jul 6, 2020 in Java-Script by Niroj
• 82,840 points
7,804 views
0 votes
1 answer

How do I escape a single quote in SQL Server?

Hello @kartik, Single quotes are escaped by doubling ...READ MORE

answered Jul 21, 2020 in PHP by Niroj
• 82,840 points
6,245 views
0 votes
1 answer

How to specify a port to run a create-react-app based project?

Hello @kartik, You could use cross-env to set the port, ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,840 points
5,902 views
0 votes
1 answer

How do you set a default value for a MySQL Datetime column?

Hello @kartik, In version 5.6.5, it is possible ...READ MORE

answered Aug 18, 2020 in PHP by Niroj
• 82,840 points
8,029 views
0 votes
2 answers

How can I set focus on an element in an HTML form using JavaScript?

Hi Kartik, try the following script <script>  (window.onload = ...READ MORE

answered Sep 24, 2020 in Java-Script by Okugbe
• 280 points
1,863 views
0 votes
1 answer

How can we detect timeout on an AJAX (XmlHttpRequest) call in the browser?

Hii, In order to handle a timeout: var xmlHttp ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,840 points
5,749 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP