mousemove拖动事件触发click事件
制作一个可以拖动的元素,如果给这个元素同时添加点击事件的话。拖动后会触发点击事件。要想将点击事件和拖动事件扯开关系。
实现原理,在mousedown或者touchstart的时候记录这个元素的
clientX和clientY,并记录下来
在@mouseup和或者@touchend拖动结束的时候,判断现在的x与y是否更变了,如果没有发送了变化则相当于触发了click事件
<view class="rebackUni" v-bind:style="{ top: abtnTop + 'px', left: abtnLeft + 'px' }" @mousedown="startDragPc"
@mousemove="draggingFnPc" @mouseup="endDragPc" @touchstart="startDrag" @touchmove="draggingFn"
@touchcancel="endDrag" @touchend="endDrag">
<image src="../../static/AndroidProp.png" mode=""></image>
</view>
clicking: false,
dragging: false,
abtnTop: 0,
abtnLeft: 60,
abtnStartX: 0,
abtnStartY: 0,
recordX:0,
recordY:0
startDragPc(event) {
this.dragging = true;
this.recordX = event.clientX;
this.recordy = event.clientY;
this.abtnStartX = event.clientX - this.abtnLeft;
this.abtnStartY = event.clientY - this.abtnTop;
},
startDrag(event) {
var curTouch = event.touches[0];
this.dragging = true;
this.recordX = curTouch.clientX;
this.recordy = curTouch.clientY;
this.abtnStartX = curTouch.clientX - this.abtnLeft;
this.abtnStartY = curTouch.clientY - this.abtnTop;
},
draggingFnPc(event) {
if (this.dragging) {
this.abtnLeft = event.clientX - this.abtnStartX;
this.abtnTop = event.clientY - this.abtnStartY;
}
},
draggingFn(event) {
var curTouch = event.touches[0];
if (this.dragging) {
this.abtnLeft = curTouch.clientX - this.abtnStartX;
this.abtnTop = curTouch.clientY - this.abtnStartY;
}
},
endDragPc(event) {
this.dragging = false;
this.clicking = false;
//视为触发click事件
if(this.recordX == event.clientX){
this.appShow = false;
}
},
endDrag(event) {
var curTouch = event.touches[0];
this.dragging = false;
this.clicking = false;
//视为触发click事件
if(this.recordX == curTouch.clientX){
this.appShow = false;
}
},
Comments | NOTHING