Livewire - wire:click (excluding certain child elements)

#1

I have a parent div which I am triggering wire:click on.

This div is a card which when the user clicks, displays some information to the user.

Within the div is a “rename” button - unfortunately, clicking this rename button also triggers the wire:click on the parent element.

My question is: what is the best practice to prevent the wire:click call when a specific child element is clicked? I have tried passing $event.target.value to the controller, so I can return null if the rename button was clicked, but unfortunately $event.target.value does not contain anything. Maybe there is a better way to implement this as I do believe it would work.

Any idea?

Many thanks!

#2

On your button’s wire:click event, add .stop to stop propagation.

<button wire:click.stop="function">Button Text</button>
#3

Thanks for your pointer, but I could not get it working. For reference, here’s a simplified version of the issue:

<div wire:click.stop="openCard('{{ $card->id}}')">
    ........

    <div class="...">
        <a href="https://www.google.com" target="_blank">
    </div>
</div>

When I click the child div (which opens Google in a new tab) it triggers the openCard function which I do not want.

Any idea?

#4

Hi @jdtheman,

I would try putting a click event on the child div that does nothing but stops propagation of click event (totally untested!):

<div wire:click.stop="openCard('{{ $card->id}}')">
    ........

    <div x-data x-on:click.stop="" class="...">
        <a href="https://www.google.com" target="_blank">
    </div>
</div>
2 Likes
#5

@jdtheman,

I’ve verified that @ashleyhood’s solution will give you the desired effect. I thought that you had a separate livewire component nested in your card. Regardless, adding .stop on a click event will prevent it from bubbling up.

1 Like
#6

Can confirm this solution is working! Thank you both @ashleyhood and @shortbrownman - really appreciated! :+1: