作者使用的是catchtouchstart;catcht有效的阻止了点击事件;
tap,touchstart,touchend的事件触发顺序为start→end→tap 所以问题在于catchtouchstart,catchtouchend后事件被阻止了,tap捕获不到。 改为bindtouchstart,bindtouchend后问题得以解决。
<button bindtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" bindtap="clicks" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 100rpx;height:100rpx;border-radius:50%;position:fixed;padding:0;">
+
<!--<image src="../../image/icon/shopping.png" style="height:100%;width:100%;"></image>-->
</button>
var startPoint;
Page({
data: {
buttonTop: 0,
buttonLeft: 0,
windowHeight: '',
windowWidth: ''
},
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res);
// 屏幕宽度、高度
console.log('height=' + res.windowHeight);
console.log('width=' + res.windowWidth);
// 高度,宽度 单位为px
that.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
})
},
buttonStart: function (e) {
startPoint = e.touches[0]
},
buttonMove: function (e) {
var endPoint = e.touches[e.touches.length - 1]
var translateX = endPoint.clientX - startPoint.clientX
var translateY = endPoint.clientY - startPoint.clientY
startPoint = endPoint
var buttonTop = this.data.buttonTop + translateY
var buttonLeft = this.data.buttonLeft + translateX
//判断是移动否超出屏幕
if (buttonLeft + 50 >= this.data.windowWidth) {
buttonLeft = this.data.windowWidth - 50;
}
if (buttonLeft <= 0) {
buttonLeft = 0;
}
if (buttonTop <= 0) {
buttonTop = 0
}
if (buttonTop + 50 >= this.data.windowHeight) {
buttonTop = this.data.windowHeight - 50;
}
this.setData({
buttonTop: buttonTop,
buttonLeft: buttonLeft
})
},
buttonEnd: function (e) {
//拖动结束
// wx.showToast({
// title: '走你',
// })
},
clicks:function(){
wx.showToast({
title: '走你',
})
}
})