提交 41bb9a7e 编写于 作者: Q qiang

feat: touchtrack 兼容鼠标事件

上级 05d5bf58
var addListenerToElement = function (element, type, callback, r) {
// 暂时忽略capture
const addListenerToElement = function (element, type, callback, capture) {
// 暂时忽略 capture
element.addEventListener(type, $event => {
if (typeof callback === 'function') {
if (callback($event) === false) {
......@@ -13,14 +13,18 @@ var addListenerToElement = function (element, type, callback, r) {
}
export default {
beforeDestroy () {
document.removeEventListener('mousemove', this.__mouseMoveEventListener)
document.removeEventListener('mouseup', this.__mouseUpEventListener)
},
methods: {
touchtrack: function (element, method, useCancel) {
var self = this
var x0 = 0
var y0 = 0
var x1 = 0
var y1 = 0
var fn = function ($event, state, x, y) {
const self = this
let x0 = 0
let y0 = 0
let x1 = 0
let y1 = 0
const fn = function ($event, state, x, y) {
if (self[method]({
target: $event.target,
currentTarget: $event.currentTarget,
......@@ -43,32 +47,66 @@ export default {
}
}
var $eventOld = null
let $eventOld = null
let hasTouchStart
let hasMouseDown
addListenerToElement(element, 'touchstart', function ($event) {
if ($event.touches.length === 1 && !$eventOld) {
hasTouchStart = true
$eventOld = $event
x0 = x1 = $event.touches[0].pageX
y0 = y1 = $event.touches[0].pageY
return fn($event, 'start', x0, y0)
}
})
addListenerToElement(element, 'mousedown', function ($event) {
hasMouseDown = true
if (!hasTouchStart) {
// TODO touches changedTouches
$eventOld = $event
x0 = x1 = $event.pageX
y0 = y1 = $event.pageY
return fn($event, 'start', x0, y0)
}
})
addListenerToElement(element, 'touchmove', function ($event) {
if ($event.touches.length === 1 && $eventOld) {
var res = fn($event, 'move', $event.touches[0].pageX, $event.touches[0].pageY)
const res = fn($event, 'move', $event.touches[0].pageX, $event.touches[0].pageY)
x1 = $event.touches[0].pageX
y1 = $event.touches[0].pageY
return res
}
})
const mouseMoveEventListener = this.__mouseMoveEventListener = function ($event) {
if (!hasTouchStart && hasMouseDown) {
// TODO target currentTarget touches changedTouches
const res = fn($event, 'move', $event.pageX, $event.pageY)
x1 = $event.pageX
y1 = $event.pageY
return res
}
}
document.addEventListener('mousemove', mouseMoveEventListener)
addListenerToElement(element, 'touchend', function ($event) {
if ($event.touches.length === 0 && $eventOld) {
hasTouchStart = false
$eventOld = null
return fn($event, 'end', $event.changedTouches[0].pageX, $event.changedTouches[0].pageY)
}
})
const mouseUpEventListener = this.__mouseUpEventListener = function ($event) {
hasMouseDown = false
if (!hasTouchStart) {
// TODO target currentTarget touches changedTouches
$eventOld = null
return fn($event, 'end', $event.pageX, $event.pageY)
}
}
document.addEventListener('mouseup', mouseUpEventListener)
addListenerToElement(element, 'touchcancel', function ($event) {
if ($eventOld) {
var $eventTemp = $eventOld
hasTouchStart = false
const $eventTemp = $eventOld
$eventOld = null
return fn($event, useCancel ? 'cancel' : 'end', $eventTemp.touches[0].pageX, $eventTemp.touches[0].pageY)
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册