CODEWITHSUNDEEP
htmlcssformsmouseevent
Michael W. Czechowski
Michael W. Czechowski

Reputation: 3455

Label is not toggled, if cursor is moved while mousedown

I've just realized a bug (or maybe feature) regarding the standard behavior of a label tag.

The click event is usually triggered after mouse is up again. As long as the cursor is not moved while mouse is down, the click event is triggered and toggles the labeled input field (e.g. checkbox).

Is this the standard mouse behavior to NOT toggle the input field while moving cursor if mousedown? And how to avoid it?

label {
  display: block;
  cursor: pointer;
  padding: 1rem;
  color: firebrick;
  border: 1px solid currentcolor;
  font-family: sans-serif;
  text-align: center;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label {
  color: limegreen;
}
<input type="checkbox" id="test" />
<label for="test">Click here and move your cursor while mousedown</label>

Upvotes: 1

Views: 80

Answers (1)

hugo der hungrige
hugo der hungrige

Reputation: 12902

As far as I know all browsers handle the distinction between click and mousedown similar. Mousedown is triggered when the mouse button is down. Click is only triggered after the mouse is up again and the cursor hasn't moved in the meantime. This not just true for labels, but for links and buttons as well and is the standard behavior.

If you don't want the text to be selected, you can try using user-select: none.

label {
  display: block;
  cursor: pointer;
  padding: 1rem;
  color: firebrick;
  border: 1px solid currentcolor;
  font-family: sans-serif;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label {
  color: limegreen;
}
<input type="checkbox" id="test" />
<label for="test">Click here and move your cursor while mousedown</label>

Upvotes: 1

Related Questions