Javascript Click Event Firing Twice, Even With StopPropagation

I have a set of items like this:

Solution 1:

Try adding preventDefault after your stopPropogation:

function selectVehicle(el,e) {
    console.log(e);
    e.stopPropagation();
    e.preventDefault();
}

I believe it is best to place console.log(e) after the stopPropogation & preventDefault though. You will also then need to implement functionality to set the checkbox to checked since this would prevent that from happening.

Solution 2:

When the <span> or the <img> receives a "click" event, that'll bubble up the DOM to the <label> element, and your event handler will be called. The <label> then triggers another "click" event on the <input> element, and that also bubbles up to the <label>.

You can check in the handler to see whether the <input> was clicked:

function selectVehicle(el,e) {
    if (e.target.tagName !== "INPUT") return;

    // do stuff
}

Alternatively, you could just add the "click" handler only to the <input> itself.

Now you're also going to notice that your code isn't working because you've hit a common problem with binding event handlers inside loops. The problem is that the variable c will have as its value the length of the cars list by the time the event handlers actually run. There are a few ways of dealing with that; one is to loop with forEach() instead of a for loop:

[].forEach.call(cars, function(car) {
    car.addEventListener("click", function(e){
        selectVehicle(car,e);
    }, false);
});

Solution 3:

You are adding the event listener to the label, you should add the event listener to the checkbox because the label behavior copy the same of the input assigned in for.

Please note that if you click just in the checkbox the callbacks works fine, this is because the event on the label is raised by the checkbox.

The right way to do that is to add the event listener only for the checkbox or adding prevent default in the setlectVehicle callback.

Solution 4:

You are not required to preventDefault or stopPropagation, but just to add listner on the input element.

cars[c].children[0].addEventListener("click", function(e) {

Try this. It is working as expected.

Additionally, you are not required to use Id's with label's for if the label element encloses the required input/other elements

var cars = document.getElementsByClassName('cars');

for (var c = 0; c < cars.length; c++) {
  cars[c].children[0].addEventListener("click", function(e) {
    selectVehicle(cars[c], e);
  }, false);
}

function selectVehicle(el, e) {
  console.log(e);

}

<label class="cars">
  <input type="checkbox" value="1" alt="Cadenza" name="vehicles[]">
  <img src="img/bill_murray_173x173.jpg">
  <span>Cadenza</span>
</label>
<label class="cars">
  <input type="checkbox" value="1" alt="Cadenza" name="vehicles[]">
  <img src="img/bill_murray_173x173.jpg">
  <span>Cadenza 2</span>
</label>

Share