可移动的按钮单机无效
- 当前 Bug 的表现（可附上截图） 按钮只能移动，单击事件不再触发 - 预期表现 拖动时移动，单击时触发上传功能 - 复现路径 WXML： <button bindtap='upload_img' catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;width: 50px;height:50px;border-radius:50px;position:fixed;background:#4267b2;line-height:50px;font-size:25pt;color:#fff;">+</button><!--上传图像至服务器--> JS： 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 }) } }) }, onShow: function () { }, 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) { } }) - 提供一个最简复现 Demo
