定义一个no_touch类,将所需要禁用长按的因素引用no_touch类
.no_touch {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
实际应用
html代码
<template>
<div>
<div class="xuanfu no_touch" id="moveDiv" :style="position"
@mousedown="down" @touchstart="down"
@mousemove="move" @touchmove="move"
@mouseup="end" @touchend="end">
<a :href="'tel:' + '02258711357'"><img src="../../static/index/tel.png" style="width: 49px; height: 49px; " /></a>
<slot></slot>
</div>
</div>
</template>
css代码
<style lang="scss" scoped>
.no_touch {
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
-webkit-user-select:none; /*webkit浏览器*/
-khtml-user-select:none; /*早期浏览器*/
-moz-user-select:none; /*火狐*/
-ms-user-select:none; /*IE10*/
user-select:none;
}
.xuanfu {
/* 如果碰到滑动问题,1.3 请检查 z-index。z-index需比web大一级*/
z-index: 999;
position: fixed; // 这里的定位方式有待考量,fixed的话存在未知设置不合理,跑出屏幕不显示的问题
}
</style>
参考