Rant
在ios触控设备上有一些我很难实现的东西，在使用鼠标工作时似乎工作得很好 .
Set
该示例中的集合由三个常见步骤（mousedown，mousemove和mouseup）和/或（touchstart，touchmove和touchend）定义 .
Goal
试图实现的是通过mousedown或touchstart启动一个集合，在两者之间创建一个元素，并在新创建的元素上注册同一集合的事件 .
-
我点击蓝色元素，按住鼠标，在绿色元素上移动它并注册所有事件（工作）
-
我触摸蓝色元素，握住手指，在绿色元素上移动它并注册所有事件（不起作用）
Example
下面的示例显示可以启动一组mouseevents并在另一个元素上完成它 .
不幸的是，这似乎并不适用于touchevents . 我可以开始一套但没有在一组中的另一个元素上完成它 . 人们需要先结束它并开始一个新的以获得它的后期事件 .
;var Test = {
_End: function(){
var tO = document.querySelector('#whateverOverlay');
tO && tO.parentNode.removeChild(tO)
},
//e:={event}
_Start: function(e){
if(e){
var tP = (e.target || e.srcElement);
var tE = document.querySelector('#whateverOverlay');
if(!tE){
tE = document.createElement('div');
tE.id = 'whateverOverlay';
tE.style.cssText = 'position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: green';
tE.onmousemove = function(){
console.log('Moving')
};
tE.onmouseup = function(){
console.log('Ending');
Test._End()
};
tE.ontouchmove = function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
alert('Moving') //No console on my IPad
};
tE.ontouchend = function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
alert('Ending'); //No console on my IPad
Test._End()
};
tP.appendChild(tE)
}
}
},
Init: function(){
this._End();
var tE = document.querySelector('#whateverLayer');
if(!tE){
tE = document.createElement('div');
tE.id = 'whateverLayer';
tE.style.cssText = 'position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: blue; z-index: 999';
tE.onmousedown = function(e){
Test._Start(e)
};
tE.ontouchstart = function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
Test._Start(e)
};
document.body.appendChild(tE)
}
}
};
Test.Init();