Exclude certain element from click.outside

[Shashank-Bhatt1]

Hi, Thanks for this awesome lightweight library.

I am trying to detect outside event with @click.outside and based on that I am dispatching some custom event at window level due to the fact that the div element where I need to do the operation is not inside the x-data. Everything is working fine.

I just have a small question. If i am clicking outside the element which I need to show also hides for which I have activated edit-mode.

This click event is in different part of body somewhere.

@click="() => {
      editMode = true;
      $dispatch('edit-mode-activated');
  }"
@click.outside="() => {
      editMode = false;
      $dispatch('edit-mode-deactivated');
  }"

and here is the element which I need to show when edit mode is activated which is also at somewhere else.

<div x-data="{editMode: false}" @edit-mode-activated.window="editMode = true"
                    @edit-mode-deactivated.window="editMode = false">
         <div x-cloak  x-show="!editMode">Show this in edit mode deactivation</div>
      <div class="excluding-element" x-cloak  x-show="editMode">Show this in edit mode activation</div>
</div>

Is there any way in which I can exclude the lower div with class excluding-element from emitting click outside so that clicking on edit mode doesn't close edit mode itself. :)

I saw somewhere that @click.stop would work but is this the best way to accomplish this?

[ekwoka]

It's either use .stop or restructure the Dom so it's not outside.