vuedraggable：屏蔽内部拖拽长按触发复制（华为浏览器，QQ浏览器）@click事件失效

屏蔽内部拖拽长按触发复制

draggable组件：

            <draggable style="width: 80%" @end="onEnd" v-model="myAudios" chosen-class="chosen" force-fallback="true" fallbackTolerance="3" group="material" animation="1000">
                <transition-group style="height: 7em; display: flex">
                    <template v-for="(element, index) in myAudios">
                        <drag-item @itemClick="clickAudio(index)" class="item" :key="element.name" :index="index" :audio="element">
                        </drag-item>
                    </template>
                </transition-group>
            </draggable>

dragItem：

<template>
<!--    <div @click="clickAudio(index)" class="item" v-for="(element, index) in myAudios" :key="element.name">-->
    <div>
        <div style="height: 100%;width: 100%; display: flex" @click.stop.prevent="onClick">
            <div style="margin: auto">{{audio.formName}}</div>
        </div>
    </div>
<!--    </div>-->
</template>

代码如上，楼主尝试了网上的各种办法，包括不限于

1. 通过css设置禁止用户选中
2. 通过事件截获并preventDefault
3. 加一个div遮罩层，z-index无限大
4. …

结果无一例外是失败的，但是也查到可能是因为楼主的手机是华为，自带浏览器和QQ浏览器都会防不住。。。真的绷不住，最后加了css的限制，在微信浏览器里可以达到限制效果。如果有好的办法欢迎戳菜菜楼主。。。

@click事件失效

这个问题还是有成熟的解决方案的，通过改写拖拽组件，独立出子组件进行父子组件通讯成功将@click和拖拽集于一身，还是比较丝滑的。

菜鸡的问题

为什么前端会有各种奇奇怪怪的兼容性问题呢？说真的极大挫伤了编程兴致。有自己学艺不精的原因，但也不想和shit打交道，每天解决非技术引发的问题。