javascript - 用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);
                }

            }
        }

解决方案

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

这篇关于javascript - 用section标签后，input会失效是什么原因的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！