无法让我的JavaScript操作在平板电脑和移动设备上运行

Question

我已经建立了一个网站，并使用javascript运行脚本，该脚本允许您在一个图像和另一个图像之间移动，以查看图像的前后。 该javascript在台式机上运行良好，但在手机和平​​板电脑上，我无法获得相同的效果以正常运行。 我需要包括一些东西才能在手机和平​​板电脑上进行这项工作吗？

这是关于效果生效位置的页面之一。 这里

您将需要在手机和平​​板电脑上查看此内容，以查看它是否应正常工作。

如果有帮助，这也是我使用的JavaScript。 让我知道您是否还有其他要求。

$(document).ready(function(){
    var wrapper = $("div.reveal-visible");

    wrapper.mousedown(function(e) {
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }).mousemove(function(e) {
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).mouseup(function(e) {
        wrapper.data("sliding", false);
    });
});

Answer 1

看看这个回答类似问题的答案 。 前提是使用JQuery的bind方法 ，该方法将处理程序附加到事件上，该事件适用于该元素。 bind方法采用eventType参数，该参数是一个包含一个或多个 DOM事件的String。 该方法还带有一个函数，该函数应在事件发生时执行该函数作为参数。

然后，对于具有触摸屏的移动设备，使用与鼠标事件等效的触摸事件： touchstart，touchmove，touchend 。

因此，将您的代码更改为以下内容：

$(document).ready(function(){
    var wrapper = $("div.reveal-visible");

    wrapper.bind("mousedown touchstart", function(e){
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    });

    wrapper.bind("mousemove touchmove", function(e){
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).bind("mouseup touchend", function(e){
        wrapper.data("sliding", false);
    });

});

编辑：好的，所以这次不起作用的原因是，当它是触摸屏时，我们必须从touch事件中获取触摸点。 代替使用e.pageX为触摸屏时，使用e.changedTouches[0].pageX 。 所以这是更新的代码：

$(document).ready(function(){
    var wrapper = $("div.reveal-visible");

    wrapper.bind("mousedown touchstart", function(e){
        var offs;
        $(this).data("sliding", true);
        if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
            offs = e.pageX - $(this).offset().left;
        }else{
            offs = e.changedTouches[0].pageX - $(this).offset().left;
        }
        $(this).find("div").width(offs);
    });

    wrapper.bind("mousemove touchmove", function(e){
        if($(this).data("sliding")){
            var offs;
            if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
                offs = e.pageX - $(this).offset().left;
            }else{
                offs = e.changedTouches[0].pageX - $(this).offset().left;
            }
            $(this).find("div").width(offs);
        }
    });

    $(document).bind("mouseup touchend", function(e){
        wrapper.data("sliding", false);
    });

});

编辑：因此，代码是正确的，但是问题出在JQuery Event Object上 。 JQuery事件对象仅支持某些类型的事件，并且不包括touch事件。 有JQuery Mobile ，其中包括指向该库的链接应该可以解决您的问题。 但是我选择将更多的“普通” JavaScript混合到代码中，而不必依赖其他资源。 以下代码已经过测试并可以正常工作：

$(document).ready(function(){
        var wrapper = $("div.reveal-visible");
        var w = document.getElementsByClassName("reveal-visible")[0];

        w.addEventListener("touchstart", start);
        w.addEventListener("touchmove", move);
        wrapper.bind("mousedown", start);
        wrapper.bind("mousemove", move);

        function start(e){
            var offs;
            $(this).data("sliding", true);
            if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
                offs = e.pageX - $(this).offset().left;
            }else{
                offs = e.changedTouches[0].pageX - $(this).offset().left;
            }
            $(this).find("div").width(offs);
        }

        function move(e){
             if($(this).data("sliding")){
                 var offs;
                 if(typeof e.changedTouches === "undefined" || e.changedTouches == null){
                     offs = e.pageX - $(this).offset().left;
                 }else{
                     offs = e.changedTouches[0].pageX - $(this).offset().left;
                 }
                 $(this).find("div").width(offs);
             }
        }

        $(document).bind("mouseup touchend", function(e){
            wrapper.data("sliding", false);
        });

    });