用section标签后,input会失效是什么原因

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

    <section id="s1" data="1" >
        <input type="file"  style="    position: absolute;top: 70%;z-index: 9;" />
        <img class="head_img" data="img/head_img1.png" alt="" src="img/head_img1.png">  
    </section>

下面是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);
                }

            }
        }
阅读 2.8k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题