Javascript click event firing twice, even with stopPropagation

Question

I have a set of items like this:

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

there's about 13 of them. I want to add a class to the label when clicked. However, the click event fires twice. right now I'm debugging the click event then I'll add the class:

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

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

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

The console.log fires twice.

The `.stopPropagation()` method prevents the event from bubbling up the DOM. Unless you've got other event handlers bound to containing elements for your `` blocks, it won't really do anything. — Pointy, Apr 06 '16 at 20:44
Also, when running your code (https://jsfiddle.net/wxmuuoam/) It only triggers once on a click.. — Jeffrey Roosendaal, Apr 06 '16 at 20:46
`cars[c].addEventListener("click", function(e){ selectVehicle(cars[c],e); },false);` -- this probably doesn't do what you expect it to do, btw. — Chris Baker, Apr 06 '16 at 20:51

score 11 · Accepted Answer · answered Apr 06 '16 at 20:42

11

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.

answered Apr 06 '16 at 20:42

mattferderer

894
9
17

Your answer is correct but I adjusted to look at the image being clicked instead to avoid the `preventDefault()` issue. – dcp3450 Apr 06 '16 at 20:48
I'll accept your answer once the timer has ran out. – dcp3450 Apr 06 '16 at 20:48

score 6 · Answer 2 · answered Apr 06 '16 at 20:50

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);
});

Processing only the relevant tag name is _exactly_ the right thing to do! — Bad Loser, Jul 29 '19 at 03:54

score 3 · Answer 3 · answered Apr 06 '16 at 20:50

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.

score 1 · Answer 4 · answered Apr 06 '16 at 20:56

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>

score 0 · Answer 5 · answered Jun 22 '23 at 17:57

Or you can simply leave your javascript code as it is. and put the input element outside the label like this:

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

And this is your Javascript UNTOUCHED:

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

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

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

score 0 · Answer 6 · answered Aug 10 '23 at 06:57

0

I found just one solution that work to me: to force that the addEventListener to be called once. I Answered in this question: https://stackoverflow.com/a/76873072/8122578

answered Aug 10 '23 at 06:57

Fabio Mariano

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 13 '23 at 03:11
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/34821902) – Harrison Aug 14 '23 at 09:06

Javascript click event firing twice, even with stopPropagation

6 Answers6

Linked