在android手机上的页面的不能响应拖曳事件

[szuzsq]

利用onmousedown、onmousemove、onmouseup、onmouseout、ontouchstart、ontouchmove、ontouchend、ontouchcancel这些事件写的图片裁剪控件，在电脑上，ios上都没问题，工作得挺好的。在android上就有问题了，拖不动。
网上找了一些文章，说是不激发ontouchmove这个事件。
我自己写的，大家可以下载玩玩。

http://www.wxshaker.com/clip.zip

我在网上找到一个大神写的cropperjs，但是他的就支持android，看了一天代码，都没弄明白他是怎么实现的。

https://github.com/fengyuanchen/cropperjs

大家有谁有过这方面的经验的？

[functionsub]

调试了下你的代码，发现最后是你获取坐标的时候出问题了

            if(e.offsetX || e.layerX){
                var x = e.offsetX != null ? e.offsetX : e.layerX != null ? e.layerX : 0;
                var y = e.offsetY != null ? e.offsetY : e.layerY != null ? e.layerY : 0;
            }else{
                var touch = e.touches[0];
                var x = touch.pageX != null ? touch.pageX : touch.layerX != null ? touch.layerX : 0;
                var y = touch.pageY != null ? touch.pageY : touch.layerY != null ? touch.layerY : 0;
                x = x - getElementLeft(canvas);
                y = y - getElementTop(canvas);
            }
function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var  actualTop = element.offsetTop;
    var  current = element.offsetParent;
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

没有细看，随便调整了下。加了2个方法getElementTop,getElementLeft，获取元素左上角坐标用的，如果不考虑兼容性可以直接用dom.getBoundingClientRect获取到。 有些浏览器上是没有offsetX这样的值的，所以这个时候要根据触点页面坐标减去canvans左上角的坐标，这样就可以获取到offsetx了。 所有类似获取offsetx的时候都要这样改一下。自己试试看咯。

[szuzsq]

引用 1 楼 functionsub 的回复:

调试了下你的代码，发现最后是你获取坐标的时候出问题了

            if(e.offsetX || e.layerX){
                var x = e.offsetX != null ? e.offsetX : e.layerX != null ? e.layerX : 0;
                var y = e.offsetY != null ? e.offsetY : e.layerY != null ? e.layerY : 0;
            }else{
                var touch = e.touches[0];
                var x = touch.pageX != null ? touch.pageX : touch.layerX != null ? touch.layerX : 0;
                var y = touch.pageY != null ? touch.pageY : touch.layerY != null ? touch.layerY : 0;
                x = x - getElementLeft(canvas);
                y = y - getElementTop(canvas);
            }
function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var  actualTop = element.offsetTop;
    var  current = element.offsetParent;
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

没有细看，随便调整了下。加了2个方法getElementTop,getElementLeft，获取元素左上角坐标用的，如果不考虑兼容性可以直接用dom.getBoundingClientRect获取到。 有些浏览器上是没有offsetX这样的值的，所以这个时候要根据触点页面坐标减去canvans左上角的坐标，这样就可以获取到offsetx了。 所有类似获取offsetx的时候都要这样改一下。自己试试看咯。

引用 1 楼 functionsub 的回复:

调试了下你的代码，发现最后是你获取坐标的时候出问题了

            if(e.offsetX || e.layerX){
                var x = e.offsetX != null ? e.offsetX : e.layerX != null ? e.layerX : 0;
                var y = e.offsetY != null ? e.offsetY : e.layerY != null ? e.layerY : 0;
            }else{
                var touch = e.touches[0];
                var x = touch.pageX != null ? touch.pageX : touch.layerX != null ? touch.layerX : 0;
                var y = touch.pageY != null ? touch.pageY : touch.layerY != null ? touch.layerY : 0;
                x = x - getElementLeft(canvas);
                y = y - getElementTop(canvas);
            }
function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var  actualTop = element.offsetTop;
    var  current = element.offsetParent;
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

没有细看，随便调整了下。加了2个方法getElementTop,getElementLeft，获取元素左上角坐标用的，如果不考虑兼容性可以直接用dom.getBoundingClientRect获取到。 有些浏览器上是没有offsetX这样的值的，所以这个时候要根据触点页面坐标减去canvans左上角的坐标，这样就可以获取到offsetx了。 所有类似获取offsetx的时候都要这样改一下。自己试试看咯。

大牛!!!!!!,谢谢你.果然是这样的. 方便的话,能加个QQ么?40678884