Kode saya adalah:

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

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

Silakan lihat biola ini: http://jsfiddle.net/ZWw3Z/5/

Saya ingin memicu acara klik hanya pada elemen pseudo (bit merah). Artinya, saya tidak ingin acara klik dipicu pada bit biru.

Ini tidak mungkin; pseudo-elements sama sekali bukan bagian dari DOM sehingga Anda tidak dapat mengikat acara apa pun secara langsung dengannya, Anda hanya dapat mengikat elemen induknya.

Jika Anda harus memiliki penangan klik pada wilayah merah saja, Anda harus membuat elemen turunan, seperti a span, meletakkannya tepat setelah <p>tag pembuka , menerapkan gaya p spanbukan p:before, dan mengikatnya.

Sebenarnya itu mungkin. Anda dapat memeriksa apakah posisi yang diklik berada di luar elemen, karena ini hanya akan terjadi jika ::beforeatau ::afterdiklik.

Contoh ini hanya memeriksa elemen di sebelah kanan tetapi itu akan berfungsi dalam kasus Anda.

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

Pada peramban modern, Anda dapat mencoba dengan properti pointer-event css (tetapi itu mengarah pada ketidakmungkinan untuk mendeteksi peristiwa mouse pada simpul induk):

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;
}

Ketika target acara adalah elemen "p" Anda, Anda tahu itu adalah "p: sebelum" Anda.

Jika Anda masih perlu mendeteksi acara mouse pada p utama, Anda dapat mempertimbangkan kemungkinan untuk mengubah struktur HTML Anda. Anda dapat menambahkan tag rentang dan gaya berikut:

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

Target acara sekarang adalah elemen "span" dan "p: before".

Contoh tanpa jquery: http://jsfiddle.net/2nsptvcu/

Contoh dengan jquery: http://jsfiddle.net/0vygmnnb/

Berikut adalah daftar browser yang mendukung pointer-events: http://caniuse.com/#feat=pointer-events

Jawaban saya akan bekerja untuk siapa saja yang ingin mengklik area halaman yang pasti. Ini bekerja untuk saya pada posisi saya yang benar-benar: setelah

Berkat artikel ini , saya menyadari (dengan jQuery) saya dapat menggunakan e.pageYdan e.pageXbukannya mengkhawatirkan tentang e.offsetY/Xdan e.clientY/Xmengeluarkan antar browser.

Melalui coba-coba, saya mulai menggunakan koordinat mouse clientX dan clientY di objek acara jQuery. Koordinat ini memberi saya offset X dan Y dari tetikus relatif ke sudut kiri atas port tampilan browser. Ketika saya membaca Panduan Referensi jQuery 1.4 oleh Karl Swedberg dan Jonathan Chaffer, saya melihat bahwa mereka sering merujuk ke koordinat pageX dan pageY. Setelah memeriksa dokumentasi jQuery yang diperbarui, saya melihat bahwa ini adalah koordinat yang distandarisasi oleh jQuery; dan, saya melihat bahwa mereka memberi saya offset X dan Y dari mouse relatif ke seluruh dokumen (bukan hanya port view).

Saya menyukai event.pageYide ini karena akan selalu sama, karena itu relatif terhadap dokumen . Saya dapat membandingkannya dengan elemen induk after: saya menggunakan offset (), yang mengembalikan X dan Y juga relatif terhadap dokumen.

Oleh karena itu, saya dapat membuat berbagai wilayah "dapat diklik" di seluruh halaman yang tidak pernah berubah.

Ini demo saya tentang codepen .

atau jika terlalu malas untuk codepen, inilah JS:

* Saya hanya peduli tentang nilai-nilai Y untuk contoh saya.

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');
  }
});

Ini bekerja untuk saya:

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

Jawaban singkat:

Saya melakukannya. Saya menulis fungsi untuk penggunaan dinamis untuk semua orang kecil di luar sana ...

Contoh kerja yang ditampilkan pada halaman

Bekerja contoh masuk ke konsol

Jawaban panjang:

... Masih melakukannya.

Butuh beberapa saat untuk melakukannya, karena elemen psuedo tidak benar-benar ada di halaman. Sementara beberapa jawaban di atas berfungsi dalam skenario BEBERAPA, mereka SEMUA gagal menjadi dinamis dan bekerja dalam skenario di mana elemen keduanya tidak terduga dalam ukuran dan posisi (seperti elemen diposisikan mutlak overlay bagian dari elemen induk). Milik saya tidak.

Pemakaian:

//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;

});

Bagaimana itu bekerja:

Ia meraih posisi tinggi, lebar, atas, dan kiri (berdasarkan posisi yang jauh dari tepi jendela) elemen induk dan meraih posisi tinggi, lebar, atas, dan kiri (berdasarkan tepi wadah induk ) dan membandingkan nilai-nilai tersebut untuk menentukan di mana elemen psuedo berada di layar.

Kemudian membandingkan di mana mouse berada. Selama mouse berada dalam rentang variabel yang baru dibuat maka ia mengembalikan true.

catatan:

Adalah bijaksana untuk membuat elemen induk RELATIF diposisikan. Jika Anda memiliki elemen psuedo yang benar-benar diposisikan, fungsi ini hanya akan berfungsi jika diposisikan berdasarkan dimensi induknya (sehingga induknya harus relatif ... mungkin lengket atau tetap akan berfungsi juga .... Saya tidak tahu).

Kode:

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

  };      

}

Dukung:

Saya tidak tahu .... sepertinya itu bodoh dan suka mengembalikan otomatis sebagai nilai yang dihitung terkadang. TAMPAKNYA BEKERJA DENGAN BAIK DALAM SEMUA BROWSER JIKA DIMENSI DIRANCANG DALAM CSS. Jadi ... atur tinggi dan lebar Anda pada elemen psuedo Anda dan hanya gerakkan dengan atas dan kiri. Saya sarankan menggunakannya pada hal-hal yang Anda tidak masalah dengan itu tidak berfungsi. Seperti animasi atau semacamnya. Chrome berfungsi ... seperti biasa.

Tambahkan kondisi di acara Klik untuk membatasi area yang dapat diklik.

    $('#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

Ini adalah jawaban yang diedit oleh Fasoeu dengan CSS3 dan JS ES6 terbaru

Demo yang diedit tanpa menggunakan JQuery.

Contoh kode terpendek:

<p><span>Some text</span></p>

p {
    position: relative;
    pointer-events: none;
}
p::before {
    content: "";
    position: absolute;
    pointer-events: auto;
}
p span {
    display: contents;
    pointer-events: auto;
}

const all_p = Array.from(document.querySelectorAll('p'));

for (let p of all_p) {
    p.addEventListener("click", listener, false);
};

Penjelasan:

pointer-eventsmengontrol deteksi peristiwa, menghapus acara penerimaan dari target, tetapi tetap menerima dari elemen semu memungkinkan untuk mengklik ::beforedan ::afterdan Anda akan selalu tahu apa yang Anda klik pada elemen semu, namun jika Anda masih perlu mengklik, Anda meletakkan semua konten dalam elemen bersarang ( spanmisalnya), tetapi karena kami tidak ingin menerapkan gaya tambahan, display: contents;menjadi solusi yang sangat praktis dan didukung oleh sebagian besar browser . pointer-events: none;seperti yang sudah disebutkan di posting asli juga banyak didukung .

Bagian JavaScript juga digunakan secara luas didukung Array.fromdan for...of, bagaimanapun, mereka tidak perlu digunakan dalam kode.

Tidak satu pun dari jawaban ini yang dapat diandalkan, dan jawaban saya tidak akan lebih dapat diandalkan.

Selain peringatan, jika Anda masuk ke skenario beruntung di mana elemen yang Anda coba klik tidak memiliki padding (sehingga semua ruang "bagian dalam" elemen tersebut sepenuhnya ditutupi oleh sub-elemen), maka Anda dapat memeriksa target acara klik terhadap wadah itu sendiri. Jika cocok, itu berarti Anda telah mengklik elemen: sebelum atau: setelah.

Jelas ini tidak akan layak dengan kedua jenis (sebelum dan sesudah) namun saya telah menerapkannya sebagai peretasan / perbaikan kecepatan dan berfungsi dengan baik, tanpa banyak pengecekan posisi, yang mungkin tidak akurat tergantung pada sekitar sejuta faktor yang berbeda .

Tidak, tetapi Anda dapat melakukannya seperti ini

Dalam file html, tambahkan bagian ini

<div class="arrow">
</div>

Dalam css Anda bisa melakukan ini

p div.arrow {
content: '';
position: absolute;
left:100%;
width: 10px;
height: 100%;
background-color: red;

} Semoga ini akan membantu Anda