Friday, 22 November 2019

HTML Label doesn't trigger the respective input if the mouse gets moved while clicking in Firefox

In the following example, when you click on the label, the input changes state.

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>

In Chrome, when you move the cursor between the mousedown and mouseup events the input still gets triggered, whereas in Firefox the checkbox doesn't change state.

Is there a way to fix this? (without using JavaScript event listeners)

Firefox version: 69.0.3 (64-bit)

Full set of actions when using chrome.

  1. Press the button over the label
  2. Move the cursor around (even outside the label) while still holding the button
  3. Return the cursor back to the label
  4. Release the button


from HTML Label doesn't trigger the respective input if the mouse gets moved while clicking in Firefox

No comments:

Post a Comment