Bagaimana Mengesan Klik Butang Belakang dengan Tepat dalam Pelayar Web Sambil Mengelakkan Pencetus Palsu?

Mengesan Klik Butang Belakang dalam Pelayar Web: Menangani Pencetus Palsu

Apabila cuba mengesan klik butang belakang pengguna, pembangun sering bergantung pada window.onbeforeunload acara. Walau bagaimanapun, pendekatan ini mempunyai had: ia juga mencetuskan apabila tindakan lain dilakukan, seperti menyegarkan halaman.

Penyelesaian yang lebih komprehensif adalah untuk membezakan antara klik butang belakang dan acara lain:

Menggunakan API Sejarah:

Pendekatan ini menyasarkan pelayar yang menyokong API Sejarah (fungsi history.pushState):

<code class="js">window.onload = function () {
  if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
      history.pushState('newjibberish', null, null);
      // Handle back or forward button clicks here (excluding refresh)
    };
  } else {
    ... // Handle non-History API browsers
  }
}</code>

Menggunakan Perubahan Cincang:

Untuk pelayar tanpa sokongan History API, penyelesaian sandaran boleh dilaksanakan menggunakan perubahan cincang:

<code class="js">window.onload = function () {
  ... // Similar to History API code
} else {
  var ignoreHashChange = true;
  window.onhashchange = function () {
    if (!ignoreHashChange) {
      ignoreHashChange = true;
      window.location.hash = Math.random();
      // Detect back button click here
      // Note: Messes with hash symbol at the end of URL
    } else {
      ignoreHashChange = false;
    }
  };
}</code>

Mengendalikan Isu Muat Semula:

Semasa penyelesaian di atas menangani pengesanan butang belakang, mereka tidak mengendalikan penyegaran halaman. Untuk ini, window.onbeforeunload masih boleh digunakan:

<code class="js">window.onbeforeunload = function (e) {
  if (e.preventDefault) {
    e.preventDefault();
    e.returnValue = '';
  }
}</code>

Atas ialah kandungan terperinci Bagaimana Mengesan Klik Butang Belakang dengan Tepat dalam Pelayar Web Sambil Mengelakkan Pencetus Palsu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!