Click event on List and Icon

digiproduct

I have a QList with QItems, and in each QItem there are several QIcons.

I placed click handlers on all the QIcons, and on the QItem. The intention being that clicking on an item calls specific functions, and clicking on the other part of the QItem calls a different function.

It works … EXCEPT … clicking on a QIcon also causes the QItem click to trigger.

How can I stop the click event being also passed to the QItem when the QIcon is clicked?

priya2995

Can you post your code to understand what did u do @digiproduct

digiproduct

It’s slightly more involved than the following because there’s multiple icons, so this is not the complete code … but effectively if I click on the icon, or text in the list (which are both at the left) I want to call one function … and if I click on the profile icon which is on the right side of the list I want to call a different function …

At present, clicking on the QIcon triggers both “showProfile” and “listActivity” but clicking on the QAvatar or QItemSection triggers only “listActivity”

‘’’

      <q-list bordered>
        <q-item
          v-for="contact in contacts"
          :key="contact.id"
          class="q-my-sm"
          clickable
          v-ripple
          @click="listActivity"
        >
          <q-item-section avatar>
            <q-avatar size="5em">
              <img :src="contact.user_avatar">
            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>
              {{ contact.full_name }} ({{ contact.email }})
              <q-badge align="middle" color="green" v-if="contact.newcontact === 'true'">New</q-badge>
            </q-item-label>
            <q-item-label caption lines="1"></q-item-label>
            <q-item-label caption lines="1">Next Appointment: {{ contact.next_contact_date }}</q-item-label>
            <q-item-label
              caption
              lines="2"
            >Last contact: {{ contact.last_contact_date }} {{ contact.lastcontactdescription }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon
              name="far fa-user"
              color="grey"
              size="2.5rem"
              class="q-pa-lg"
              @click="showProfile"
            >
              <q-tooltip>Full details for {{ contact.full_name }}</q-tooltip>
            </q-icon>

metalsadman

@digiproduct try putting an event modifier on your @click like so @click.prevent https://vuejs.org/v2/guide/events.html#Event-Modifiers.

digiproduct

@metalsadman Thanks for that …

StopPropogation is what I need, but I’ll read all that document carefully to ensure I do it in the best possible way, and use the correct modifier.

digiproduct

@metalsadman PERFECT …

All I had to do was change @click=“showProfile” to @click.stop=“showProfile” and it worked exactly as I need.

Thanks for your help.

metalsadman

@digiproduct yeah in your case it’s the event on your inner element bubbling up to its parent @click.stop="showProfile" one should do it i think.

edit. nvm, you beat me to it haha, glad to help

No More Posting New Topics!

Click event on List and Icon