无法在平板电脑和手机上将我的 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 to a similar question. The premise is to use JQuery's 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. The JQuery event object only supports certain types of events and the touch events are not included. There is JQuery Mobile，其中包括一个 link图书馆应该解决你的问题。但我选择将更多 "plain" 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);
        });

    });