Question

咆哮

我在ios触控设备上有些难以实现的功能，在使用鼠标工作时似乎工作正常。

设置

此示例中的一个集合由三个常见步骤（mousedown，mousemove和mouseup）和/或（touchstart，touchmove和touchend）定义。

目标

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

我点击蓝色元素，按住鼠标，在它上面移动它绿色元素并注册所有事件（工作）
我触摸蓝色元素，握住手指，移动它 green-element并注册所有事件（不起作用）

示例

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

https://jsfiddle.net/2v3nw0sv/

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

0 个答案: