Bitte sehen Sie sich diese Geige an: http://jsfiddle.net/ZWw3Z/5/

Mein Code ist:

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

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

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>

Ich möchte ein Click-Event nur auf das Pseudo-Element (das rote Bit) auslösen. Das heißt, ich möchte nicht, dass das Click-Ereignis auf dem blauen Bit ausgelöst wird.

Das ist nicht möglich; Pseudoelemente sind überhaupt kein Teil des DOM, sodass Sie keine Ereignisse direkt an sie binden können, sondern nur an ihre übergeordneten Elemente.

Wenn Sie einen Click-Handler nur im roten Bereich haben müssen, müssen Sie ein untergeordnetes Element wie a erstellen spanplatzieren Sie es direkt nach der Öffnung <p> Tag, Stile anwenden auf p span anstatt p:beforeund daran binden.

Eigentlich ist es möglich. Sie können überprüfen, ob die angeklickte Position außerhalb des Elements war, da dies nur dann der Fall ist, wenn ::before oder ::after geklickt wurde.

Dieses Beispiel überprüft nur das Element auf der rechten Seite, aber das sollte in Ihrem Fall funktionieren.

span = document.querySelector('span');

span.addEventListener('click', function (e) {
    if (e.offsetX > span.offsetWidth) {
        span.className="c2";
    } else {
        span.className="c1";
    }
});

div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }

span.c1 { background: yellow; }
span.c2:after { background: yellow; }

<div><span>ELEMENT</span></div>

JSFiddle

An moderne Browser Sie können es mit der CSS-Eigenschaft pointer-events versuchen (aber es führt dazu, dass Mausereignisse auf dem übergeordneten Knoten nicht erkannt werden):

p {
    position: relative;
    background-color: blue;
    color:#ffffff;
    padding:0px 10px;
    pointer-events:none;
}
p::before {
    content: attr(data-before);
    margin-left:-10px;
    margin-right:10px;
    position: relative;
    background-color: red;
    padding:0px 10px;
    pointer-events:auto;
}

Wenn das Ereignisziel Ihr „p“-Element ist, wissen Sie, dass es Ihr „p:before“ ist.

Wenn Sie immer noch Mausereignisse auf dem Haupt-P erkennen müssen, sollten Sie die Möglichkeit in Betracht ziehen, Ihre HTML-Struktur zu ändern. Sie können eine hinzufügen Spanne -Tag und den folgenden Stil:

p span {
    background:#393;
    padding:0px 10px;
    pointer-events:auto;
}

Die Ereignisziele sind jetzt sowohl das “span”- als auch das “p:before”-Element.

Beispiel ohne jquery: http://jsfiddle.net/2nsptvcu/

Beispiel mit jquery: http://jsfiddle.net/0vygmnnb/

Hier ist die Liste der Browser, die Pointer-Events unterstützen: http://caniuse.com/#feat=pointer-events

Kurze Antwort:

Ich tat es. Ich habe eine Funktion für die dynamische Nutzung für all die kleinen Leute da draußen geschrieben …

Arbeitsbeispiel, das auf der Seite angezeigt wird

Arbeitsbeispiel für die Protokollierung in der Konsole

Lange Antwort:

… Habe es trotzdem gemacht.

Ich habe eine Weile dafür gebraucht, da ein Pseudo-Element nicht wirklich auf der Seite ist. Während einige der obigen Antworten in EINIGEN Szenarien funktionieren, sind sie ALLE nicht dynamisch und funktionieren in einem Szenario, in dem ein Element sowohl in Größe als auch in Position unerwartet ist (z. B. absolut positionierte Elemente, die einen Teil des übergeordneten Elements überlagern). Meine nicht.

Verwendungszweck:

//some element selector and a click event...plain js works here too
$("div").click(function() {
    //returns an object {before: true/false, after: true/false}
    psuedoClick(this);

    //returns true/false
    psuedoClick(this).before;

    //returns true/false
    psuedoClick(this).after;

});

Wie es funktioniert:

Es erfasst die Höhe, Breite, obere und linke Position (basierend auf der Position weg vom Rand des Fensters) des übergeordneten Elements und erfasst die Höhe, Breite, obere und linke Position (basierend auf der Kante des übergeordneten Containers). ) und vergleicht diese Werte, um zu bestimmen, wo sich das Pseudoelement auf dem Bildschirm befindet.

Es vergleicht dann, wo sich die Maus befindet. Solange sich die Maus im neu erstellten Variablenbereich befindet, gibt sie true zurück.

Notiz:

Es ist ratsam, das übergeordnete Element RELATIVE zu positionieren. Wenn Sie ein absolut positioniertes Pseudo-Element haben, funktioniert diese Funktion nur, wenn es basierend auf den Abmessungen des übergeordneten Elements positioniert ist (das übergeordnete Element muss also relativ sein … vielleicht würde Sticky oder Fixed auch funktionieren …. Ich weiß es nicht).

Code:

function psuedoClick(parentElem) {

    var beforeClicked,
      afterClicked;

  var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10),
      parentTop = parseInt(parentElem.getBoundingClientRect().top, 10);

  var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10),
      parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10);

  var before = window.getComputedStyle(parentElem, ':before');

  var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)),
      beforeEnd = beforeStart + parseInt(before.width, 10);

  var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)),
      beforeYEnd = beforeYStart + parseInt(before.height, 10);

  var after = window.getComputedStyle(parentElem, ':after');

  var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)),
      afterEnd = afterStart + parseInt(after.width, 10);

  var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)),
      afterYEnd = afterYStart + parseInt(after.height, 10);

  var mouseX = event.clientX,
      mouseY = event.clientY;

  beforeClicked = (mouseX >= beforeStart && mouseX <= beforeEnd && mouseY >= beforeYStart && mouseY <= beforeYEnd ? true : false);

  afterClicked = (mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd ? true : false);

  return {
    "before" : beforeClicked,
    "after"  : afterClicked

  };      

}

Unterstützung:

Ich weiß nicht … es sieht so aus, als wäre ie dumm und gibt manchmal gerne auto als berechneten Wert zurück. ES SCHEINT IN ALLEN BROWSERN GUT ZU FUNKTIONIEREN, WENN ABMESSUNGEN IN CSS EINGESTELLT WERDEN. Also … stellen Sie Ihre Höhe und Breite auf Ihren Pseudo-Elementen ein und verschieben Sie sie nur mit oben und links. Ich empfehle, es für Dinge zu verwenden, bei denen Sie damit einverstanden sind, dass es nicht funktioniert. Wie eine Animation oder so. Chrome funktioniert … wie gewohnt.

Meine Antwort funktioniert für alle, die auf einen bestimmten Bereich der Seite klicken möchten. Das hat bei mir auf meinem funktioniert absolut positioniert :nach

Danke dafür Artikelerkannte ich (mit jQuery), dass ich verwenden kann e.pageY und e.pageX anstatt sich Sorgen zu machen e.offsetY/X und e.clientY/X Problem zwischen Browsern.

Durch mein Ausprobieren habe ich begonnen, die Mauskoordinaten clientX und clientY im jQuery-Ereignisobjekt zu verwenden. Diese Koordinaten gaben mir den X- und Y-Offset der Maus relativ zur oberen linken Ecke des Ansichtsfensters des Browsers. Als ich jedoch das jQuery 1.4 Reference Guide von Karl Swedberg und Jonathan Chaffer las, sah ich, dass sie sich oft auf die Koordinaten pageX und pageY bezogen. Nachdem ich die aktualisierte jQuery-Dokumentation überprüft hatte, sah ich, dass dies die von jQuery standardisierten Koordinaten waren; und ich sah, dass sie mir den X- und Y-Offset der Maus relativ zum gesamten Dokument gaben (nicht nur zum Ansichtsfenster).

ich mochte das event.pageY Idee, weil es immer so sein würde, wie es war bezogen auf das Dokument. Ich kann es mit dem übergeordneten Element meines :afters vergleichen, indem ich offset() verwende, das sein X und Y auch relativ zum Dokument zurückgibt.

Daher kann ich auf der gesamten Seite eine Reihe von “anklickbaren” Bereichen finden, die sich nie ändern.

Hier ist meins Demo auf Codepen.

oder wenn Sie zu faul für Codepen sind, hier ist das JS:

* Ich habe mich bei meinem Beispiel nur um die Y-Werte gekümmert.

var box = $('.box');
// clickable range - never changes
var max = box.offset().top + box.outerHeight();
var min = max - 30; // 30 is the height of the :after

var checkRange = function(y) {
  return (y >= min && y <= max);
}

box.click(function(e){
  if ( checkRange(e.pageY) ) {
    // do click action
    box.toggleClass('toggle');
  }
});

Das funktioniert bei mir:

$('#element').click(function (e) {
        if (e.offsetX > e.target.offsetLeft) {
            // click on element
        }
         else{
           // click on ::before element
       }
});

Fügen Sie dem Click-Ereignis eine Bedingung hinzu, um den anklickbaren Bereich einzuschränken.

    $('#thing').click(function(e) {
       if (e.clientX > $(this).offset().left + 90 &&
             e.clientY < $(this).offset().top + 10) {
                 // action when clicking on after-element
                 // your code here
       }
     });

DEMO