javascript - 为什么我的这个事件只支持一次,再次拖拽就不起作用了
阿神
阿神 2017-04-11 12:17:52
[JavaScript讨论组]

为什么我的这串代码只能执行一次以后就没法触发事件了?

阿神
阿神

闭关修行中......

全部回复(2)
PHPz

事实上这个和translate有关,原因我还找不到,不过当使用translate时,如果拖动超过来原来的位置,那么touchmove就不再触发,而用translate3d就不会。

你可以试试这样。

var pagey1;
var pagey2;
var lastMove = 0;
function load() {
    var obj=document.querySelector('.box');
    obj.addEventListener("touchstart", touch,false);
    obj.addEventListener("touchmove", touch,false);
    obj.addEventListener("touchend", touch,false);
    function touch(e) {
        console.log(e.type);
        e.target.cancelable = true;
        var e = e||window.event;
        switch(e.type) {
            case "touchstart":
                e.preventDefault();    
                pagey1 = e.touches[0].pageY;

                console.log("start");
                break;
            case "touchmove":
                e.preventDefault();
                pagey2 = e.touches[0].pageY
                obj.style.transform = "translate3d(0px, " + (pagey2- pagey1 + lastMove) + "px, 0px)";
                break;
            case "touchend":
                lastMove =  pagey2 - pagey1 + lastMove;
                console.log("end");
                break;
        }
    }
}
阿神

你的代码貌似是弄个滑动,当你滑了之后,第一个走掉,出来第二个,而你你选择器 querySelect(“.box”)只是选了第一个元素,所以后面的都没有绑定监听,如果你要选择所有的 .box 类,请使用 querySelecAll()

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号