long press for image tags in javascript

Question

this is my template for my vue gallery with a image tag inside img-container class.

<template>
<div v-for="(image, index) of images" :key='image.src' class="img-container"
      @click='fullScreenMode'
      :class="`img-idx-${index}`" 
      @touchstart='longClick' 
      @touchrelease='release'
      @mousedown="longClick" 
      @mouseup="release">
      <img :src="image.src">
    </div>
</template>

methods: {
  release(){
    clearTimeout(isSelected);
  },
  longClick(){
    isSelected = setTimeout(() => this.isSelectionMode = true, 500);
  }
}

it works perfectly on desktops but it has problems with touch devices.

when i long press on the image, the options show up to download the image. I want to prevent this from happening.

I've tried using pointer-events: none but it completely disables the image selection process and i can't select the image.

So is there a better way to do this?

Answer 1

On Mobile long press will select the image and shows Download Option

So All You Need to Prevent The selection image on long Press

img {
  user-select: none !important;
  -webkit-user-drag: none;
}