javascript - 用section标签后,input会失效是什么原因
高洛峰
高洛峰 2017-04-11 12:18:03
[JavaScript讨论组]

在微信html5中,做了上下滑动翻页效果,js获取的是section标签, 也就意味着每一个翻页的内容都要用section包裹,但在section包裹之下,用input 会失效,把input单独提取出来不被sectoin包裹,实现起来就没有问题。下面是代码:

    

下面是js代码(滑动效果):

var sections = document.querySelectorAll('section');
var nowData=1 , nextData , preData , nowId , nextId , preId;
        var animation = false;

        var startY, moveY;

        this.touchStart = function(event,target){

            event.preventDefault();

            var touch = event.targetTouches[0]; //位于当前DOM元素上的手指的一个列表

            startY = touch.pageY;

            moveY = 0;

        }
        
        this.touchMove = function(event){

            event.preventDefault();

            var touch = event.touches[0];

            moveY = touch.pageY - startY;
            
        }

        this.touchEnd = function(event){

            event.preventDefault();

            if (animation == false) {

                nowData = parseInt(this.getAttribute('data'));

                nowId = document.getElementById('s' + nowData);

                nextData = nowData + 1;

                nextId = document.getElementById('s' + nextData);

                preData = nowData - 1;

                preId = document.getElementById('s' + preData);

                if (moveY < -50 && nowData < sections.length) {

                    $(".rightan").show();

                    if (nowData==6) {$(".rightan").hide();}

                    animation = true;

                    nowId.style.zIndex = '11';

                    nextId.style.zIndex = '20';

                    nextId.style.display = 'block';

                    nowId.className = 'pt-page-moveToTop pt-page-ontop';

                    nextId.className = 'pt-page-scaleUp';

                    setTimeout(function(){
                        nowId.style.display = 'none';
                        animation = false;
                    },600);

                }else if(moveY > 50 && nowData!=1 ){

                    $(".rightan").show();

                    if (nowData==6) {$(".rightan").show();}
                    if (nowData==2) {$(".rightan").hide();}

                    animation = true;

                    nowId.style.zIndex = '11';

                    preId.style.zIndex = '20';

                    preId.style.display = 'block';

                    nowId.className = 'pt-page-moveToBottom pt-page-ontop';

                    preId.className = 'pt-page-scaleUp';
                    
                    setTimeout(function(){
                        nowId.style.display = 'none';
                        animation = false;
                    },600);
                }

            }
        }
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
怪我咯

input输入的时候的click事件,被你的touchstart回调阻止了。。。。e.preventDefault

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

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