You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, CSS pseudo-elements (:before, :after) do not support direct interaction with JavaScript events, limiting their utility in interactive designs. Developers often rely on workarounds, such as attaching events to parent elements and calculating click positions to infer interactions with pseudo-elements.
Proposal
I propose extending the pointer-events property to support custom event names. For example:
.box::after {
pointer-events:"my_event";
}
In JavaScript, this could be handled as:
document.getElementById('box').addEventListener('click',function(event){if(event.name==="my_event"){// Handle the custom event}});
Benefits
Improved Developer Experience: Simplifies the process of handling events on pseudo-elements, reducing the need for complex workarounds.
Enhanced Interactivity: Allows for more interactive and dynamic designs directly within CSS, streamlining the development process.
Consistency: Provides a more intuitive way to work with pseudo-elements, aligning their capabilities with regular DOM elements.
Considerations
Backward Compatibility: The implementation should ensure that existing usages of pointer-events are not affected.
Performance: Careful consideration should be given to how browsers handle custom events in terms of performance to avoid potential slowdowns.
Specification and Implementation: This proposal would require updates to both the CSS specification and browser implementations, which might involve significant effort.
I believe this feature would greatly benefit the web development community and am open to feedback and discussion on how best to refine this proposal.
The text was updated successfully, but these errors were encountered:
Introduction
Currently, CSS pseudo-elements (
:before
,:after
) do not support direct interaction with JavaScript events, limiting their utility in interactive designs. Developers often rely on workarounds, such as attaching events to parent elements and calculating click positions to infer interactions with pseudo-elements.Proposal
I propose extending the
pointer-events
property to support custom event names. For example:In JavaScript, this could be handled as:
Benefits
Considerations
pointer-events
are not affected.I believe this feature would greatly benefit the web development community and am open to feedback and discussion on how best to refine this proposal.
The text was updated successfully, but these errors were encountered: