长按javascript中的图像标签

Question

这是我的 vue 画廊模板，在 img-container 类中有一个图像标签。

<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);
  }
}

它在台式机上完美运行，但在触摸设备上存在问题。

当我长按图像时，会显示下载图像的选项。我想防止这种情况发生。

我尝试过使用pointer-events: none，但它完全禁用了图像选择过程，我无法选择图像。

那么有没有更好的方法来做到这一点？

Answer 1

在手机上长按会选择图片并显示下载选项

所以你只需要防止长按选择图像

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