Mobile: Click event does not work

This issue has been tracked since 2019-06-25.

Hello

I am having a checkbox inside the vue-dragable-resizable element, but the click events on this checkbox do not work on mobile (select, unselect)

I have tried to add touchstart event but that sometimes works and sometimes not.
Is there a solution?

Thanks

colin-guyon wrote this answer on 2019-06-28

Hello, I have similar issues, and for the moment I chose to bind the touchstart (and also mousedown) event on my content container, calling event.stopPropagation() to cancel the event bubbling up to the parent vue-drag-resize component. This way, input or textarea elements are correctly focused... But this may not suit all needs.
EDIT: For info I'm using the dragHandle feature.
What do you do in your touchstart event handler ?

jahanzaibtariq wrote this answer on 2021-01-27

Hi,
Same issue in my case but I found the solution.

You need to use this event @activated rather then @click.

E.g : <vue-drag-resize @activated="onActivated">

donaldma wrote this answer on 2021-11-18

@kirillmurashov any update on this?

donaldma wrote this answer on 2021-11-18

my hunch is that they use @mousedown and @touchend events internally and that in turn does not propagate any “click” events to the children content

their internal code:

<div class="vdr"
     :style="positionStyle"
     :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass: ''}`"
     @mousedown="bodyDown($event)"
     @touchstart="bodyDown($event)"
     @touchend="up($event)"
     ref="container"
     tabindex="0">
    <div :style="sizeStyle" class="content-container" ref="container2">
        <slot></slot>
    </div>
    <div
            v-for="stick in sticks"
            class="vdr-stick"
            :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
            @mousedown.stop.prevent="stickDown(stick, $event)"
            @touchstart.stop.prevent="stickDown(stick, $event)"
            :style="vdrStick(stick)">
    </div>
</div>
More Details About Repo
Owner Name kirillmurashov
Repo Name vue-drag-resize
Full Name kirillmurashov/vue-drag-resize
Language JavaScript
Created Date 2018-04-26
Updated Date 2022-11-25
Star Count 1764
Watcher Count 24
Fork Count 291
Issue Count 89

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date