JSFiddle - React, Tailwind, and code Playground

by house_leto

HTML

<div>
  <label id='label1' for='input1'>label 1</label>
  <input type='text' id='input1' />
</div>

<div style="margin-top: 20px">
  <label id='label2' for='input2'>label 2</label>
  <input type='text' id='input2' />
</div>

<div style="margin-top: 20px">
  <label id='label3' for='input3'>label 3</label>
  <input type='text' id='input3' />
</div>

JavaScript

// Default
const label1 = document.getElementById('label1')
label1.addEventListener('mousedown', (event) => {
  if (!event.defaultPrevented && event.detail > 1) {
    console.log("Label 1")
    console.log(window.getSelection())
    console.log("----------------")
  }
})

// Prevent Default if dbl click condition
const label2 = document.getElementById('label2')
label2.addEventListener('mousedown', (event) => {
  if (!event.defaultPrevented && event.detail > 1) {
    event.preventDefault();
    console.log("Label 2")
    console.log(window.getSelection())
    console.log("----------------")
  }
})

// Prevent Default always
const label3 = document.getElementById('label3')
label3.addEventListener('mousedown', (event) => {
  event.preventDefault();
  console.log("Label 3")
  console.log(window.getSelection())
  console.log("----------------")
})