298 lines
9.2 KiB
JavaScript
298 lines
9.2 KiB
JavaScript
import { Recognizer } from './recognizer'
|
||
var root = Anot.root
|
||
var supportPointer = !!navigator.pointerEnabled || !!navigator.msPointerEnabled
|
||
// 支持pointer的设备可用样式来取消click事件的300毫秒延迟
|
||
if (supportPointer) {
|
||
root.style.msTouchAction = root.style.touchAction = 'none'
|
||
}
|
||
var tapRecognizer = {
|
||
events: ['tap'],
|
||
touchBoundary: 10,
|
||
tapDelay: 90,
|
||
needClick: function(target) {
|
||
//判定是否使用原生的点击事件, 否则使用sendClick方法手动触发一个人工的点击事件
|
||
switch (target.nodeName.toLowerCase()) {
|
||
case 'button':
|
||
case 'select':
|
||
case 'textarea':
|
||
if (target.disabled) {
|
||
return true
|
||
}
|
||
|
||
break
|
||
case 'input':
|
||
// IOS6 pad 上选择文件，如果不是原生的click，弹出的选择界面尺寸错误
|
||
if ((Recognizer.isIOS && target.type === 'file') || target.disabled) {
|
||
return true
|
||
}
|
||
|
||
break
|
||
case 'label':
|
||
case 'iframe':
|
||
case 'video':
|
||
return true
|
||
}
|
||
|
||
return false
|
||
},
|
||
needFocus: function(target) {
|
||
switch (target.nodeName.toLowerCase()) {
|
||
case 'textarea':
|
||
case 'select': //实测android下select也需要
|
||
return true
|
||
case 'input':
|
||
switch (target.type) {
|
||
case 'button':
|
||
case 'checkbox':
|
||
case 'file':
|
||
case 'image':
|
||
case 'radio':
|
||
case 'submit':
|
||
return false
|
||
}
|
||
//如果是只读或disabled状态,就无须获得焦点了
|
||
return !target.disabled && !target.readOnly
|
||
default:
|
||
return false
|
||
}
|
||
},
|
||
focus: function(targetElement) {
|
||
var length
|
||
//在iOS7下, 对一些新表单元素(如date, datetime, time, month)调用focus方法会抛错,
|
||
//幸好的是,我们可以改用setSelectionRange获取焦点, 将光标挪到文字的最后
|
||
var type = targetElement.type
|
||
if (
|
||
Recognizer.isIOS &&
|
||
targetElement.setSelectionRange &&
|
||
type.indexOf('date') !== 0 &&
|
||
type !== 'time' &&
|
||
type !== 'month'
|
||
) {
|
||
length = targetElement.value.length
|
||
targetElement.setSelectionRange(length, length)
|
||
} else {
|
||
targetElement.focus()
|
||
}
|
||
},
|
||
findControl: function(labelElement) {
|
||
// 获取label元素所对应的表单元素
|
||
// 可以能过control属性, getElementById, 或用querySelector直接找其内部第一表单元素实现
|
||
if (labelElement.control !== undefined) {
|
||
return labelElement.control
|
||
}
|
||
|
||
if (labelElement.htmlFor) {
|
||
return document.getElementById(labelElement.htmlFor)
|
||
}
|
||
|
||
return labelElement.querySelector(
|
||
'button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea'
|
||
)
|
||
},
|
||
fixTarget: function(target) {
|
||
if (target.nodeType === 3) {
|
||
return target.parentNode
|
||
}
|
||
if (window.SVGElementInstance && target instanceof SVGElementInstance) {
|
||
return target.correspondingUseElement
|
||
}
|
||
|
||
return target
|
||
},
|
||
updateScrollParent: function(targetElement) {
|
||
//如果事件源元素位于某一个有滚动条的祖父元素中,那么保持其scrollParent与scrollTop值
|
||
var scrollParent = targetElement.tapScrollParent
|
||
|
||
if (!scrollParent || !scrollParent.contains(targetElement)) {
|
||
var parentElement = targetElement
|
||
do {
|
||
if (parentElement.scrollHeight > parentElement.offsetHeight) {
|
||
scrollParent = parentElement
|
||
targetElement.tapScrollParent = parentElement
|
||
break
|
||
}
|
||
|
||
parentElement = parentElement.parentElement
|
||
} while (parentElement)
|
||
}
|
||
|
||
if (scrollParent) {
|
||
scrollParent.lastScrollTop = scrollParent.scrollTop
|
||
}
|
||
},
|
||
touchHasMoved: function(event) {
|
||
//判定是否发生移动,其阀值是10px
|
||
var touch = event.changedTouches[0],
|
||
boundary = tapRecognizer.touchBoundary
|
||
return (
|
||
Math.abs(touch.pageX - tapRecognizer.pageX) > boundary ||
|
||
Math.abs(touch.pageY - tapRecognizer.pageY) > boundary
|
||
)
|
||
},
|
||
|
||
findType: function(targetElement) {
|
||
// 安卓chrome浏览器上，模拟的 click 事件不能让 select 打开，故使用 mousedown 事件
|
||
return Recognizer.isAndroid &&
|
||
targetElement.tagName.toLowerCase() === 'select'
|
||
? 'mousedown'
|
||
: 'click'
|
||
},
|
||
sendClick: function(targetElement, event) {
|
||
// 在click之前触发tap事件
|
||
Recognizer.fire(targetElement, 'tap', {
|
||
touchEvent: event
|
||
})
|
||
var clickEvent, touch
|
||
//某些安卓设备必须先移除焦点，之后模拟的click事件才能让新元素获取焦点
|
||
if (document.activeElement && document.activeElement !== targetElement) {
|
||
document.activeElement.blur()
|
||
}
|
||
|
||
touch = event.changedTouches[0]
|
||
// 手动触发点击事件,此时必须使用document.createEvent('MouseEvents')来创建事件
|
||
// 及使用initMouseEvent来初始化它
|
||
clickEvent = document.createEvent('MouseEvents')
|
||
clickEvent.initMouseEvent(
|
||
tapRecognizer.findType(targetElement),
|
||
true,
|
||
true,
|
||
window,
|
||
1,
|
||
touch.screenX,
|
||
touch.screenY,
|
||
touch.clientX,
|
||
touch.clientY,
|
||
false,
|
||
false,
|
||
false,
|
||
false,
|
||
0,
|
||
null
|
||
)
|
||
clickEvent.touchEvent = event
|
||
targetElement.dispatchEvent(clickEvent)
|
||
},
|
||
touchstart: function(event) {
|
||
//忽略多点触摸
|
||
if (event.targetTouches.length !== 1) {
|
||
return true
|
||
}
|
||
//修正事件源对象
|
||
var targetElement = tapRecognizer.fixTarget(event.target)
|
||
var touch = event.targetTouches[0]
|
||
if (Recognizer.isIOS) {
|
||
// 判断是否是点击文字，进行选择等操作，如果是，不需要模拟click
|
||
var selection = window.getSelection()
|
||
if (selection.rangeCount && !selection.isCollapsed) {
|
||
return true
|
||
}
|
||
var id = touch.identifier
|
||
//当 alert 或 confirm 时，点击其他地方，会触发touch事件，identifier相同，此事件应该被忽略
|
||
if (
|
||
id &&
|
||
isFinite(tapRecognizer.lastTouchIdentifier) &&
|
||
tapRecognizer.lastTouchIdentifier === id
|
||
) {
|
||
event.preventDefault()
|
||
return false
|
||
}
|
||
|
||
tapRecognizer.lastTouchIdentifier = id
|
||
|
||
tapRecognizer.updateScrollParent(targetElement)
|
||
}
|
||
//收集触摸点的信息
|
||
tapRecognizer.status = 'tapping'
|
||
tapRecognizer.startTime = Date.now()
|
||
tapRecognizer.element = targetElement
|
||
tapRecognizer.pageX = touch.pageX
|
||
tapRecognizer.pageY = touch.pageY
|
||
// 如果点击太快,阻止双击带来的放大收缩行为
|
||
if (
|
||
tapRecognizer.startTime - tapRecognizer.lastTime <
|
||
tapRecognizer.tapDelay
|
||
) {
|
||
event.preventDefault()
|
||
}
|
||
},
|
||
touchmove: function(event) {
|
||
if (tapRecognizer.status !== 'tapping') {
|
||
return true
|
||
}
|
||
// 如果事件源元素发生改变,或者发生了移动,那么就取消触发点击事件
|
||
if (
|
||
tapRecognizer.element !== tapRecognizer.fixTarget(event.target) ||
|
||
tapRecognizer.touchHasMoved(event)
|
||
) {
|
||
tapRecognizer.status = tapRecognizer.element = 0
|
||
}
|
||
},
|
||
touchend: function(event) {
|
||
var targetElement = tapRecognizer.element
|
||
var now = Date.now()
|
||
//如果是touchstart与touchend相隔太久,可以认为是长按,那么就直接返回
|
||
//或者是在touchstart, touchmove阶段,判定其不该触发点击事件,也直接返回
|
||
if (
|
||
!targetElement ||
|
||
now - tapRecognizer.startTime > tapRecognizer.tapDelay
|
||
) {
|
||
return true
|
||
}
|
||
|
||
tapRecognizer.lastTime = now
|
||
|
||
var startTime = tapRecognizer.startTime
|
||
tapRecognizer.status = tapRecognizer.startTime = 0
|
||
|
||
var targetTagName = targetElement.tagName.toLowerCase()
|
||
if (targetTagName === 'label') {
|
||
//尝试触发label上可能绑定的tap事件
|
||
Recognizer.fire(targetElement, 'tap', {
|
||
touchEvent: event
|
||
})
|
||
var forElement = tapRecognizer.findControl(targetElement)
|
||
if (forElement) {
|
||
tapRecognizer.focus(targetElement)
|
||
targetElement = forElement
|
||
}
|
||
} else if (tapRecognizer.needFocus(targetElement)) {
|
||
// 如果元素从touchstart到touchend经历时间过长,那么不应该触发点击事
|
||
// 或者此元素是iframe中的input元素,那么它也无法获点焦点
|
||
if (
|
||
now - startTime > 100 ||
|
||
(deviceIsIOS && window.top !== window && targetTagName === 'input')
|
||
) {
|
||
tapRecognizer.element = 0
|
||
return false
|
||
}
|
||
|
||
tapRecognizer.focus(targetElement)
|
||
Recognizer.isAndroid && tapRecognizer.sendClick(targetElement, event)
|
||
|
||
return false
|
||
}
|
||
|
||
if (Recognizer.isIOS) {
|
||
//如果它的父容器的滚动条发生改变,那么应该识别为划动或拖动事件,不应该触发点击事件
|
||
var scrollParent = targetElement.tapScrollParent
|
||
if (
|
||
scrollParent &&
|
||
scrollParent.lastScrollTop !== scrollParent.scrollTop
|
||
) {
|
||
return true
|
||
}
|
||
}
|
||
//如果这不是一个需要使用原生click的元素，则屏蔽原生事件，避免触发两次click
|
||
if (!tapRecognizer.needClick(targetElement)) {
|
||
event.preventDefault()
|
||
// 触发一次模拟的click
|
||
tapRecognizer.sendClick(targetElement, event)
|
||
}
|
||
},
|
||
touchcancel: function() {
|
||
tapRecognizer.startTime = tapRecognizer.element = 0
|
||
}
|
||
}
|
||
|
||
Recognizer.add('tap', tapRecognizer)
|