Javascript 不同元素上的开始和结束触摸事件

Rant

在ios触摸设备上，我很难实现一些东西，在使用鼠标时，这些设备似乎工作得很好

设置

本例中的集合由三个常见步骤（mousedown、mousemove和mouseup）和/或（touchstart、touchmove和touchend）定义

目标

尝试实现的是通过mousedown或touchstart启动一个集合，在其间创建一个元素，并在新创建的元素上注册同一集合的事件

• 我点击蓝色元素，按住鼠标，在屏幕上移动它 绿色元素并登记所有事件（工程）
• 我触摸蓝色元素，握住手指，在屏幕上移动它 绿色元素并注册所有事件（不工作）

示例

下面的示例显示，可以启动一组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();