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事件的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 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，其中包含指向该库的链接可以解决您的问题。但我选择混合更多＆＃34; plain＆＃34; 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);
        });

    });

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

1 个答案: