Bagaimana untuk Mendapatkan Perkataan Di Bawah Kursor dalam Chrome dengan JavaScript?

Mendapatkan Perkataan Di Bawah Kursor dalam JavaScript

Dalam pembangunan web, adalah berguna untuk mengetahui perkataan yang sedang dituding oleh kursor . Artikel ini membentangkan penyelesaian JavaScript yang berfungsi secara khusus dalam penyemak imbas Chrome.

Gambaran Keseluruhan Fungsi

Fungsi getWordAtPoint mengambil tiga parameter: elemen (elem), koordinat x (x), dan koordinat-y (y). Ia menggunakan objek Julat untuk mengulangi kandungan teks unsur HTML dan menentukan perkataan yang berada di bawah kursor pada koordinat yang ditentukan.

Pelaksanaan

Fungsi dahulu menyemak sama ada elemen input ialah nod teks. Jika ya, ia mencipta objek Julat yang memilih kandungan teks elemen. Kemudian, ia menggunakan gelung untuk memilih secara berperingkat-peringkat setiap aksara dalam teks, menggunakan kaedah getBoundingClientRect() untuk menentukan sama ada segiempat sempadan aksara semasa mengandungi koordinat yang ditentukan. Jika padanan ditemui, objek Julat dikembangkan untuk merangkumi keseluruhan perkataan menggunakan kaedah kembangkan(). Akhir sekali, fungsi ini mengembalikan perwakilan rentetan perkataan.

Jika elemen input bukan nod teks, fungsi itu akan berulang secara rekursif ke atas nod anaknya sehingga ia menemui nod teks yang mengandungi koordinat yang ditentukan.

Penggunaan

Untuk menggunakan fungsi ini, anda boleh melampirkannya pada pengendali acara mousemove pada elemen HTML yang dikehendaki. Contohnya:

<code class="javascript">document.addEventListener('mousemove', (e) => {
  const word = getWordAtPoint(e.target, e.x, e.y);
  console.log(word);
});</code>

Kod ini akan log perkataan di bawah kursor ke konsol setiap kali pengguna menggerakkan tetikus ke atas elemen yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Perkataan Di Bawah Kursor dalam Chrome dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!