How to capture child checkbox click event inside parent li?

Question

I have the following Vue Code that shows the structure that we're using:

<template>
  <li class="mm-product-item" v-on:click="edit(item)">
    <p class="mm-product-info input-field">
      <input type="checkbox"
              class="filled-in"
              :id="'checkbox-' + item.id"
              :checked="item.addNextOrder"
              v-on:click.capture.stop="toggleNextOrder($event, item.id)" />
      <label :for="'checkbox-' + item.id"></label>
      <span class="mm-product-name" click="edit(item)">{{ item.name }}</span>
      <span class="mm-product-quantity">{{ item.quantity }}</span>
      <span class="mm-product-unit">{{ item.selectedUnit }}</span>
    </p>

    <button href="#remove-product" @click.prevent.stop="destroy(item.id)" class="mm-product-remove" title="remover produto">&times;</button>
  </li>
</template>

So there's a checkbox nested inside a p nested inside an li .

The li , as the parent, has a wider, larger area that should trigger the edit(item) method. This works just fine.

The checkbox , although smaller, should also capture the click event and trigger the toggleNextOrder method.

If no event is specified in the li , the checkbox event handling works just fine.

But if the li event exists (as in the snippet above), the checkbox event won't even happen, but it should, according to Vue's documentation .

I was able to make a similar situation work just fine in this JSFiddle but, for some reason, in this production environment it is not working.

Is there a way to fix this?

Answer 1

I found out what was happening with the help of Chrome Dev Tools.

There's a label right next to the checkbox, associated to it:

<input type="checkbox" (...) />
<label :for="'checkbox-' + item.id" (...) ></label>

Inspecting the <input type=checkbox> using Google Chrome's Dev Tools, it seems like the checkbox "has no area":

•••

While inspecting the <label> right next to it, shows me it actually "wraps and surrounds" the checkbox:

•••

So I added the @click.capture.stop.prevent="toggleNextOrder(item.id)" Event Handler to the label, instead of the checkbox and now it works.