web-dev-qa-db-ja.com

Firefoxでクリックしているときにマウスが移動した場合、HTMLラベルはそれぞれの入力をトリガーしません

次の例では、ラベルをクリックすると、入力の状態が変化します。

_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では、mousedownイベントとmouseupイベントの間にカーソルを移動しても入力はトリガーされますが、Firefoxではチェックボックスの状態は変わりません。

これを修正する方法はありますか？ （JavaScriptイベントリスナーを使用しない場合）

Firefoxバージョン：69.0.3 (64-bit)

Chromeを使用する場合のアクションの完全なセット。

  1. ラベルの上にあるボタンを押します
  2. ボタンを押したまま、カーソルを（ラベルの外側でも）移動します。
  3. カーソルをラベルに戻します
  4. ボタンを離します
javascripthtmlcsslabel
13
nick zoum

いいえ。Firefoxのバグのように見え、コードの問題ではありません。この動作にCSSの回避策があるとは思いません。

あなたはそれをMozillaに報告して問題を修正することができるかもしれませんが、私はそれには頼りません。 https://bugzilla.mozilla.org/home

潜在的な回避策として、代わりにマウスアップでイベントをトリガーすることをお勧めします。

0
Garet Webster

JavaScriptがない場合、「for」値が入力「id」値と同じラベルをクリックすると、入力がクリックされますが、これはブラウザー間で一貫していません。

ブラウザが上記に従っている場合、JavaScriptクリックイベントは効果をキャンセルし、結果として何もしません。

解決策

ブラウザー間で一貫性を持たせるには、別の戦略を採用することができます。Onloadは、「data-for」のすべての属性「for」を動的に変更するため、元のブラウザーの影響を無効にします。次に、クリックイベントを各ラベルに適用できます。

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