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

Question

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

这是我正在浏览的关于效果处于活动状态的页面之一。 Here

您需要在手机和平​​板电脑上查看它才能看到它没有正常工作。

如果有帮助，这也是我正在使用的 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

查看this answer 的类似问题。前提是使用 JQuery 的 bind method 将处理程序附加到应用它的元素的事件。 bind 方法接受一个 eventType 参数，它是一个包含 一个或多个 DOM 事件的字符串。该方法还将一个函数作为参数，它应该在事件发生时执行。

然后对于移动设备（具有触摸屏）使用鼠标事件的触摸等效项：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 event 获取触摸点。触摸屏不要使用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 事件对象仅支持某些类型的事件，不包括触摸事件。有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);
        });

    });