Dalam contoh berikut, ketika Anda mengklik label, input berubah status.

document.querySelector("label").addEventListener("click", function() {
  console.log("clicked label");
});

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<input type="checkbox" id="1">
<label for="1">Label</label>

Di Chrome, ketika Anda memindahkan kursor antara mousedowndan mouseupperistiwa input masih akan terpicu, sedangkan di Firefox kotak centang tidak berubah status.

Apakah ada cara untuk memperbaikinya? (tanpa menggunakan pendengar acara JavaScript)

Versi Firefox: 69.0.3 (64-bit)

Set penuh tindakan saat menggunakan chrome.

1. Tekan tombol di atas label
2. Gerakkan kursor di sekitar (bahkan di luar label) sambil tetap menahan tombol
3. Kembalikan kursor ke label
4. Lepaskan tombol

pengantar

Meskipun saya secara khusus menyatakan dalam pertanyaan bahwa jawabannya tidak boleh melibatkan JavaScript, semua jawaban bekerja dengan JavaScript.
Karena ini tampaknya merupakan bug Firefox dan sebagian besar jawaban yang diajukan pada saat ini akan mengharuskan saya untuk juga mengubah sisa kode saya, saya memutuskan untuk membuat skrip yang dapat dijalankan sekali, akan menangani semua label terlepas dari kapan mereka ditambahkan ke dom dan akan memiliki dampak paling kecil pada skrip saya yang lain.

Solusi - Contoh

var mutationConfiguration = {
  attributes: true,
  childList: true
};

if (document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);

var managingDoms = [];

function onLoad() {
  document.querySelectorAll("label[for]").forEach(manageLabel);
  if (typeof MutationObserver === "function") {
    var observer = new MutationObserver(function(list) {
      list.forEach(function(item) {
        ({
          "attributes": function() {
            if (!(item.target instanceof HTMLLabelElement)) return;
            if (item.attributeName === "for") manageLabel(item.target);
          },
          "childList": function() {
            item.addedNodes.forEach(function(newNode) {
              if (!(newNode instanceof HTMLLabelElement)) return;
              if (newNode.hasAttribute("for")) manageLabel(newNode);
            });
          }
        }[item.type])();
      });
    });
    observer.observe(document.body, mutationConfiguration);
  }
}

function manageLabel(label) {
  if (managingDoms.includes(label)) return;
  label.addEventListener("click", onLabelClick);
  managingDoms.push(label);
}

function onLabelClick(event) {
  if (event.defaultPrevented) return;
  var id = this.getAttribute("for");
  var target = document.getElementById(id);
  if (target !== null) {
    this.removeAttribute("for");
    var self = this;
    target.click();
    target.focus();
    setTimeout(function() {
      self.setAttribute("for", id);
    }, 0);
  }
}

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

<input type="checkbox" id="a">
<input type="text" id="b">
<label for="a">A</label>
<script>
  setTimeout(function() {
    var label = document.createElement("label");
    label.setAttribute("for", "b");
    label.textContent = "b";
    document.body.appendChild(label);
  }, 3E3);
</script>

Penjelasan

onLabelClick

Fungsi onLabelClickperlu dipanggil setiap kali label diklik, itu akan memeriksa apakah label memiliki elemen input yang sesuai. Jika tidak, itu akan memicu itu, menghapus foratribut label sehingga browser tidak memiliki bug tidak akan memicu kembali dan kemudian menggunakan setTimeoutdari 0msuntuk menambahkan forkembali atribut sekali acara telah menggelegak. Ini berarti event.preventDefaulttidak harus dipanggil dan dengan demikian tidak ada tindakan / acara lain yang akan dibatalkan. Juga jika saya perlu mengesampingkan fungsi ini, saya hanya perlu menambahkan event-listener yang memanggil Event#preventDefaultatau menghapus foratribut.

manageLabel

FungsinyamanageLabelmenerima cek label jika telah ditambahkan pendengar acara untuk menghindari menambahkannya kembali, menambahkan pendengar jika belum ditambahkan, dan menambahkannya ke daftar label telah dikelola.

onLoad

Fungsi onLoadperlu dipanggil ketika halaman dimuat sehingga fungsi manageLabeldapat dipanggil untuk semua label pada DOM pada saat itu. Fungsi ini juga menggunakan MutationObserver untuk menangkap label apa pun yang ditambahkan, setelah beban dipecat (dan skrip telah dijalankan).

Kode yang ditampilkan di atas dioptimalkan oleh Martin Barker .

Saya tahu Anda tidak ingin pendengar Acara JS, tetapi saya berpikir Anda bermaksud mengidentifikasi gerakan ini tetapi tidak menggunakan mousedown alih-alih klik (mousedown diikuti oleh mouseup).

Meskipun ini adalah bug yang dikenal di Firefox Anda bisa mengatasinya dengan menggunakan acara mousedown

Saya harus mengubah id Anda menjadi id yang valid harus dimulai dengan karakter

document.querySelector("label").addEventListener("mousedown", function(evt) {
  console.log("clicked label");
  // if you want to to check the checkbox when it happens,
  let elmId = evt.target.getAttribute("for")
  let oldState = document.querySelector("#"+elmId).checked;
  setTimeout(() => {
    if(oldState == document.querySelector("#"+elmId).checked){
      document.querySelector("#"+elmId).checked = !oldState;
    }
  }, 150)
});

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<input type="checkbox" id="valid_1">
<label for="valid_1">Label</label>

Tidak. Ini terlihat seperti bug firefox dan bukan masalah dengan kode Anda. Saya tidak percaya ada solusi css untuk perilaku ini.

Anda mungkin dapat melaporkannya ke Mozilla dan memperbaiki masalahnya, tetapi saya tidak akan bergantung pada itu. https://bugzilla.mozilla.org/home

Untuk solusi yang potensial, saya akan menyarankan memicu acara di mouseup sebagai gantinya.

Tanpa javascript, ketika Anda mengklik label yang memiliki nilai "untuk" sama dengan nilai "id" input, maka input diklik, tetapi ini tidak konsisten di antara browser.

Jika browser mengikuti hal di atas, maka acara klik javascript Anda akan membatalkan efeknya, yang akhirnya tidak melakukan apa-apa.

Sebuah solusi

Untuk memiliki konsistensi di antara peramban, Anda dapat mengadopsi strategi yang berbeda: Membebani secara dinamis mengubah semua atribut 'untuk' untuk 'data-untuk', sehingga membatalkan pengaruh browser asli. Kemudian Anda dapat menerapkan acara klik Anda untuk setiap label.

var replaceLabelFor = function () {
    var $labels = document.querySelectorAll('label');
    var arrLabels = Array.prototype.slice.call($labels);
    arrLabels.forEach(function (item) {
      var att = document.createAttribute('data-for');
      att.value = String(this.for);
      item.setAttributeNode(att);
      item.removeAttribute('for')
    });
}

var applyMyLabelClick() {
  document.querySelector("label").addEventListener("click", function() {
    console.log("clicked label");
  });
}

// x-browser handle onload
document.attachEvent("onreadystatechange", function(){
  if(document.readyState === "complete"){
    document.detachEvent("onreadystatechange", arguments.callee);
    replaceLabelFor();
    applyMyLabelClick();
  }
});

Melampirkan acara ke dokumen dan menargetkan elemen yang Anda butuhkan di sana harus menyelesaikan masalah ini.

$ (Dokumen) .on ('klik', '.item', fungsi (acara) {});

Dari membaca topik ini di masa lalu, turun ke Firefox untuk memahami tindakan Anda sebagai upaya untuk menyeret elemen, karena pilih pengguna tidak ada, itu hanya mencegah perilaku default.

Ini didasarkan pada pengetahuan yang cukup terbatas tetapi tampaknya bug / kekhasan yang diketahui dan ada beberapa artikel yang beredar mendukung hal ini.