Question

仅使用jQuery lib;我正在尝试在拖动它的右边框时调整DIV的大小。它与鼠标完美配合，但我不能在触摸设备上工作。我认为这与e.touches。

有关

我尝试使用e.touches和e.targetTouches;他们似乎都没有工作。

我实施touch events部分吗？我错过了什么？

这是一个fiddle，以及下面的完整代码。

HTML：

<div class="container"><div class="handle"></div></div>

CSS：

.container{background:#CCC;width:200px;height:100px;position:relative;overflow:hidden;}
.handle{cursor:e-resize;height:100px;width:2px;position:absolute;top:0;right:0;background:red;}

JS：

var handle = null;

$(".handle").on('mousedown touchstart', function(e){
    handle = {
        x : e.pageX,
        p : $(this).parent(),
        pw: $(this).parent().width()
    };

    if (e.targetTouches){ //e.touches
        handle.x = e.targetTouches[0].pageX //e.touches[0]
    }

    e.preventDefault();
});

$(document).on({
    'mousemove touchmove':function(e){
        if(handle) {
            if (e.targetTouches){ //e.touches
                handle.p.width(handle.pw+(e.targetTouches[0].pageX - handle.x));  //e.touches[0]               
            }else{
                handle.p.width(handle.pw+(e.pageX - handle.x));                    
            }
        }
        e.preventDefault();
    },
    'mouseup touchend':function(e){
        handle = null;
        e.preventDefault();
    }
});

任何帮助将不胜感激！

Answer 1

而不是e.targetTouches，您应该使用e.originalEvent.touches。

所以它会有所帮助：

gesturechange

mousemove touchmove事件与gestureend
mouseup touchend事件与gesturestart
mousedown touchstart事件

另一个改进是if语句中的文档mousemove事件回调move e.preventDefault()，这样如果句柄为null，用户可以滚动页面。

Answer 2

我在使用Web应用程序时遇到了同样的问题，发现这个jquery touch plugin解决了我的问题。

下载此插件并包含在您的html文件中，您就完成了。你不需要打电话给任何touchstart / touchmove活动。

如果它不起作用，您可以添加如下触摸事件：

$('Element').addTouch();

为您要响应触摸事件的每个元素调用addTouch()方法。

检查this链接以获取更多下载选项。

使用触摸调整HTML元素的大小

2 个答案: