Aşağıdaki örnekte, etikete tıkladığınızda giriş durumu değişir.

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>

Chrome'da, imleci mousedownve mouseupetkinlikleri arasında hareket ettirdiğinizde giriş yine de tetiklenirken, Firefox'ta onay kutusu durumu değişmez.

Bunu düzeltmenin bir yolu var mı? (JavaScript etkinlik dinleyicilerini kullanmadan)

Firefox sürümü: 69.0.3 (64-bit)

Krom kullanırken tam işlem kümesi.

1. Etiketin üzerindeki düğmeye basın
2. Düğmeyi basılı tutarken imleci hareket ettirin (etiketin dışında bile)
3. İmleci etikete geri döndür
4. Düğmeyi bırakın

Giriş

Soruda özellikle cevabın JavaScript içermemesi gerektiğini belirtmiş olmama rağmen, tüm cevaplar JavaScript ile çalıştı.
Bu bir Firefox hatası gibi göründüğü ve bu noktada gönderilen cevapların çoğu da kodumun geri kalanını değiştirmemi gerektireceğinden, bir kez çalıştırılabilecek bir komut dosyası oluşturmaya karar verdim, ne zaman olursa olsun tüm etiketlerle ilgilenecek dom'a eklenirler ve diğer scriptlerim üzerinde en az etkiye sahip olurlar.

Çözüm - Örnek

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>

açıklama

onLabelClick

onLabelClickBir etiket tıklandığında fonksiyonun çağrılması gerekir, etiketin karşılık gelen bir giriş elemanı olup olmadığını kontrol eder. Eğer varsa, bu kaldırmak için söz konusu tetikleyecek fortarayıcılar kullanmak sonra-tetiği yeniden ve olmayacaktır hata yok ki etiketin niteliğini setTimeoutait 0mseklemek için forolay köpürdü sonra nitelik geri. Bu, event.preventDefaultçağrılmak zorunda olmadığı anlamına gelir ve bu nedenle başka hiçbir işlem / etkinlik iptal edilmez. Ayrıca bu işlevi geçersiz kılmak gerekirse, sadece özniteliği çağıran Event#preventDefaultveya kaldıran bir olay dinleyicisi eklemek zorundayım for.

manageLabel

İşlevmanageLabelbir etiketin yeniden eklenmesini önlemek için önceden bir etkinlik dinleyicisi eklenmiş olup olmadığını kontrol eder, daha önce eklenmemişse dinleyiciyi ekler ve yönetilen etiket listesine ekler.

onLoad

Fonksiyon onLoadsayfa fonksiyonu böylece yüklenen çağrılacak görmesin manageLabelo anda DOM tüm etiketler için çağrılabilir. İşlev ayrıca , yük tetiklendikten (ve komut dosyası çalıştırıldıktan sonra) eklenen etiketleri yakalamak için bir MutationObserver kullanır .

Yukarıda gösterilen kod Martin Barker tarafından optimize edildi .

JS Olay dinleyicileri istemediğinizi biliyorum, ama im bu hareket değil tanımlamak istediğinizi düşünüyorum ama tıklama yerine mousedown kullanıyor (fareyle ardından fare).

Bu Firefox'ta bilinen bir hata olsa da fareyle üzerine gelme olayını kullanarak bu sorunu çözebilirsiniz

Kimliğinizi, geçerli bir kimlik olması için değiştirmek zorunda kaldım.

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>

Hayır. Bu, kodunuzla ilgili bir sorun değil, bir firefox hatası gibi görünüyor. Bu davranış için bir css geçici çözüm olduğuna inanmıyorum.

Mozilla'ya bildirebilir ve sorunu düzeltebilirsiniz, ancak buna güvenmem. https://bugzilla.mozilla.org/home

Olası bir çözüm için olayı fareyle açmayı öneririm.

Javascript olmadan, "for" değeri bir girdi "id" değeriyle aynı olan etikete tıkladığınızda giriş tıklanır, ancak bu tarayıcılar arasında tutarlı değildir.

Bir tarayıcı yukarıdakileri takip ederse, javascript click etkinliğiniz, hiçbir şey yapmadan sonuçlanan efekti iptal eder.

Bir çözüm

Tarayıcılar arasında tutarlılık sağlamak için farklı bir strateji kullanabilirsiniz: Onload, 'data-for' için 'için' tüm özelliklerini dinamik olarak değiştirir, böylece orijinal tarayıcı etkilenir. Ardından, tıklama etkinliğinizi her etikete uygulayabilirsiniz.

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

Etkinliği belgeye eklemek ve orada gereken öğeyi hedeflemek bu sorunu sıralamalıdır.

$ (Document) .on ('tıklama', '.item', işlev (olay) {});

Geçmişte bu konuyla ilgili okuma yapmak, Firefox'a eyleminizi öğeyi sürükleme girişimi olarak anlamakla ilgilidir, ancak kullanıcı seçimi hiçbiri olmadığından, varsayılan davranışı önler.

Bu oldukça sınırlı bilgiye dayanmaktadır, ancak bilinen bir hata / tuhaflık gibi görünüyor ve bunu destekleyen etrafında birkaç makale var.