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 in Java-Script by kartik
• 36,020 points
236 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 by anonymous
• 78,480 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 in Java-Script by Niroj
• 78,480 points
453 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 in Java-Script by Niroj
• 78,480 points
189 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 in Java-Script by Niroj
• 78,480 points
26 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 in Java-Script by Niroj
• 78,480 points
24 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 in Java-Script by Niroj
• 78,480 points
870 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 in PHP by Niroj
• 78,480 points
982 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 in Angular by Niroj
• 78,480 points
940 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 in PHP by Niroj
• 78,480 points
437 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 in Java-Script by Okugbe
• 280 points
65 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 in Java-Script by Niroj
• 78,480 points
898 views