There is a single occurrence that happens when you click on a label alongside an

Question

There is a single occurrence that happens when you click on a label alongside an

How can I change the number of events triggered when clicking a label without directly selecting the input element?

Is there a way to achieve this using CSS only, or is it necessary to use JavaScript like

document.querySelector('label input')

?

Run the code snippet below and observe the console output while switching between steps to see the current behavior of triggering two events.

document.querySelector('input[name=step]').onclick = e => console.log(e.target)

label {
  cursor: pointer;
  color: grey;
  font-size: large;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
}

<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>

javascript html css

Answer 1

Answer №1

document.querySelector('label:first-of-type').onclick = e => console.log(e.target)
document.querySelector('label:last-of-type').onclick = e => console.log(e.target)

document.querySelectorAll('label span').forEach(el => el.onclick = e => e.stopPropagation() )
document.querySelectorAll('label input').forEach(el => el.onclick = e => e.stopPropagation() )

label {
  cursor: pointer;
  color: grey;
  font-size: large;
border:1px solid;
padding:10px;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
}

<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>

Answer 2

document.querySelector('label:first-of-type').onclick = e => console.log(e.target)
document.querySelector('label:last-of-type').onclick = e => console.log(e.target)

document.querySelectorAll('label span').forEach(el => el.onclick = e => e.stopPropagation() )
document.querySelectorAll('label input').forEach(el => el.onclick = e => e.stopPropagation() )

label {
  cursor: pointer;
  color: grey;
  font-size: large;
border:1px solid;
padding:10px;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
}

<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>

Answer 3

Answer №2

If my interpretation is correct, it seems like you might be interested in adding ids and utilizing querySelector in the following manner:

HTML:

<label><input id='first' type="radio" name="step"><span>Step 1</span></label
<label><input id='last' type="radio" name="step"><span>Step 2</span></label>

JS:

document.querySelector('#first').onclick = e => console.log(e.target)
document.querySelector('#last').onclick = e => console.log(e.target)

Answer 4

If my interpretation is correct, it seems like you might be interested in adding ids and utilizing querySelector in the following manner:

HTML:

<label><input id='first' type="radio" name="step"><span>Step 1</span></label
<label><input id='last' type="radio" name="step"><span>Step 2</span></label>

JS:

document.querySelector('#first').onclick = e => console.log(e.target)
document.querySelector('#last').onclick = e => console.log(e.target)

Answer 5

Answer №3

Just a little further, consider trying out the suggestion made by @Ashley Brown in their post and incorporating your thoughts on pointer-events to prevent repetitive events if they have already been checked.

document.querySelector('label:first-of-type span').onclick = e => console.log(e.target)
document.querySelector('label:last-of-type span').onclick = e => console.log(e.target)

label {
  cursor: pointer;
  color: grey;
  font-size: large;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
  pointer-events: none;
}

<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>

Hopefully this advice will lead you in the right direction or offer some assistance along the way : )

Answer 6

Just a little further, consider trying out the suggestion made by @Ashley Brown in their post and incorporating your thoughts on pointer-events to prevent repetitive events if they have already been checked.

document.querySelector('label:first-of-type span').onclick = e => console.log(e.target)
document.querySelector('label:last-of-type span').onclick = e => console.log(e.target)

label {
  cursor: pointer;
  color: grey;
  font-size: large;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked ~ * {
  color: blue;
  font-weight: bold;
  pointer-events: none;
}

<label><input type="radio" name="step"><span>Step 1</span></label>
<label><input type="radio" name="step"><span>Step 2</span></label>

Hopefully this advice will lead you in the right direction or offer some assistance along the way : )

There is a single occurrence that happens when you click on a label alongside an

Answer №1

Answer №2

Answer №3

Similar questions

Content briefly appears and then vanishes with the use of ng-if

Preventing CORS problems when a web application imports JavaScript modules from different domains

Updating device information in real-time using React Native

various ways to select parent and child elements in CSS

"The AJAX response returned a status code of 200, however, the PHP script being executed on the XAMPP localhost did not provide

Is it possible to halt the execution of a code or skip the remainder of it if a specific condition is met using jQuery?

Creating an HTML Canvas using an AngularJS template

Web Page Layout Altered on Smaller Screen with Internet Explorer 6

How to Alter the Color of a Hyperlink in HTML

jQuery tooltip anchored to the left side of the screen, ignoring all attempts to adjust its position

Error message 'Access is Denied' occurs when using Angular.js xhr.open()

Shortcut to prevent false 0 values

Unusual scroll bar movements when using jQuery validation

How to transform a JQuery button into a dropdown menu

Tips for making a multiselect dropdown menu using bootstrap

What is the method for sending data through $_POST using a plain text HTML link (otherwise known as an href URL)?

Do these exports serve the same purpose?

Best practices for authenticating methods with Google signin in Angular projects

Include an item in a JSON structure

Images in SCSS distorted due to styling issues