Bagaimana untuk Mengesan Klik Perkataan Dalam Teks dalam Javascript Tanpa Penghuraian Kelas?

Kesan Klik Perkataan Dalam Teks Tanpa Penghuraian Kelas

Dalam Javascript, mengesan klik perkataan dengan tepat dalam teks boleh menjadi mencabar. Pendekatan biasa tetapi tidak cekap melibatkan penghuraian kelas keseluruhan dokumen HTML, menambah elemen di sekeliling setiap perkataan dan menggunakan jQuery untuk menjejak klik pada rentang ini.

Walau bagaimanapun, penyelesaian yang lebih halus kini tersedia:

Menggunakan API Pemilihan Tetingkap

API Pemilihan Tetingkap menyediakan cara untuk mendapatkan semula teks yang dipilih pada masa ini. Dengan memanfaatkan API ini, kami boleh melaksanakan mekanisme pengesanan klik tanpa memerlukan penghuraian HTML yang meluas.

Berikut ialah coretan Javascript:

<code class="javascript">$(".clickable").click(function(e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;

  // Find starting point
  while (range.toString().indexOf(" ") != 0) {
    range.setStart(node, range.startOffset - 1);
  }
  range.setStart(node, range.startOffset + 1);

  // Find ending point
  do {
    range.setEnd(node, range.endOffset + 1);
  } while (
    range.toString().indexOf(" ") == -1 &&
    range.toString().trim() != ""
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});</code>

Dalam coretan ini, kami menggunakan pendengar klik untuk mengaktifkan API pemilihan. Dengan menganalisis kedudukan mula dan akhir pemilihan, kami boleh mengekstrak perkataan yang diklik.

Pertimbangan API Pelayar

Penyelesaian ini serasi dengan Webkit, Mozilla dan IE9 . Jika anda berhasrat untuk menggunakannya sebagai sambungan penyemak imbas, pastikan bahawa API asas disokong dalam penyemak imbas sasaran anda.

Alternatif Serlahkan

Sebagai alternatif, mempertimbangkan untuk menggunakan ciri penyerlahan teks dan bukannya mengklik mungkin memberikan pengalaman pengguna yang lebih mudah.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Klik Perkataan Dalam Teks dalam Javascript Tanpa Penghuraian Kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!