Mobile: Click event does not work

[farzo]

trafficstars

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]

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]

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]

@kirillmurashov any update on this?

[donaldma]

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>