Seulement détecter l'événement de clic sur le pseudo-élément

Question

Mon code est:

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

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

Veuillez voir ce violon: http://jsfiddle.net/ZWw3Z/5/

Je voudrais déclencher un événement de clic seulement sur le pseudo-élément (le rouge bits). C'est, je ne veux pas que l'événement click pour être déclenchée sur le bleu bits.

Answer 1

Ce n'est pas possible; les pseudo-éléments ne font pas partie du DOM à tous si vous ne pouvez pas lier des événements directement à eux, vous ne pouvez lier à leurs éléments parents.

Si vous devez avoir un gestionnaire de clic sur la zone rouge, vous devez faire un élément enfant, comme un span, le placer juste après l'ouverture <p> balise, appliquer les styles à l' p span au lieu de p:before, et de se lier à elle.

Answer 2

En fait, c'est possible. Vous pouvez vérifier si l'endroit était à l'extérieur de l'élément, car cela ne sera possible que si ::before ou ::after a été cliqué.

Ce violon ne vérifie que l'élément vers la droite, mais qui devrait fonctionner dans votre cas.

http://jsfiddle.net/wC2p7/1/