为什么我的js执行了两次?

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/base64.min.js" ></script>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
    <script type="text/javascript" src="js/json2.js" ></script>
    <script src="js/mui.min.js"></script>
    <style>
        #username {
            width: 260px;height: 45px;margin-left: auto;margin-right: auto;margin-top: 160px;
            text-align: left;border: 1px solid gray;border-radius: 8px;line-height: 45px;
            background-color: white;padding-left: 10px;
        }
        #password {
            width: 260px;height: 45px;margin-left: auto;margin-right: auto;margin-top: 10px;
            text-align: left;border: 1px solid gray;border-radius: 8px;line-height: 45px;
            background-color: white;padding-left: 10px;
        }
        #BtnLogin {
            width: 200px;height: 45px;margin-left: auto;margin-right: auto;margin-top: 10px;
            text-align: center;border: 1px solid gray;border-radius: 8px;line-height: 45px;
            color: white;background-color: dodgerblue;
        }
        #inputusername {
            width: 180px;height: 30px;
        }
        #inputpassword {
            width: 180px;height: 30px;
        }
        #findpassword {
            float: left;color: darkgray;margin-left: 0px;margin-top: 10px;
        }
        #Register {
            float: left;color: darkgray;margin-left: 160px;margin-top: 10px;
        }
    </style>
</head>

<body>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript">
        mui.init();

    </script>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">登录</h1>
    </header>
    <div id="Logincontent" style="width: 100%;">
        <div id="loginregister" style=" margin-left: auto;margin-right: auto; width: 300px;height: 300px;">
            <div id="username">账号:<input id="inputusername" placeholder="请输入手机号" />  </div>
            <div id="password">密码:<input id="inputpassword" placeholder="请输入密码" /></div>
            <div id="BtnLogin">登录</div>
            <div id="findpassword">忘记密码</div>
            <div id="Register">立即注册</div>
        </div>
    </div>
    <script>
        
        document.getElementById('BtnLogin').addEventListener('tap',function(){
            console.log("ttt");
            var username = document.getElementById('inputusername').value;
            var passw = document.getElementById('inputpassword').value;
            if(isNaN(username)){
                alert("请输入正确的手机号");
            }else if(username.length == 11){
                
                if(passw != ''){
                    
                    /*用户名密码已输入*/
                    var arr = {};
                       arr['key'] = "fdrewrdfsdfwerwe";
                       arr['name'] = username;
                       arr['password'] = passw;
                       var jarr = JSON.stringify(arr);  
                      var base_arr = Base64.encode(jarr);
                    $.post("http://hdmd2016.com/index.php?g=Inter&m=Index",
                    {
                        method : "login",
                        params : base_arr
                    },
                    function(data,status){
                        
                        var jdata = $.parseJSON(data);
                        var advarr = jdata.data;
                        if(advarr != null){
                            alert("登录成功");
                        }else{
                            alert("用户名或密码输入错误");
                        }
                    });
                }else{
                    alert("请输入密码~");
            }
                
            }else{
                alert("请输入正确的手机号");
            }

        });
        
    </script>
</body>

</html>

当我输入错误的账号和密码的时候,alert("用户名或密码输入错误");会执行两次,
而且我用打印的时候,发现整个监听事件都被调用了一次,是什么原因?

阅读 9.8k
4 个回答

用.on()

新手上路,请多包涵
 document.getElementById('BtnLogin').addEventListener('tap',function(){
            console.log("ttt");
            var username = document.getElementById('inputusername').value;
            var passw = document.getElementById('inputpassword').value;
            if(isNaN(username)){
                alert("请输入正确的手机号");
            }else if(username.length == 11){
                
                if(passw != ''){
                    console.log(2);
                    /*用户名密码已输入*/
                    var arr = {};
                       arr['key'] = "fdrewrdfsdfwerwe";
                       arr['name'] = username;
                       arr['password'] = passw;
                       var jarr = JSON.stringify(arr);  
                      var base_arr = Base64.encode(jarr);
                    $.post("http://hdmd2016.com/index.php?g=Inter&m=Index",
                    {
                        method : "login",
                        params : base_arr
                    },
                    function(data,status){
                        console.log(3);
                        var jdata = $.parseJSON(data);
                        var advarr = jdata.data;
                        if(advarr != null){
                            alert("登录成功");
                        }else{
                            alert("用户名或密码输入错误");
                        }
                    });
                }else{
                    alert("请输入密码~");
            }
                
            }else{
                alert("请输入正确的手机号");
            }

        });
加两个console.log()就知道运行轨迹了。

先说解决办法:

'tap',function(){
    event.stopPropagation();
    xxx
}

原因: 据说jquery 在绑定touch,click等事件的时候没有问题,但是移动端的click,touch,tap等可能在一次点击的时候,触发了两次 ,这种现象主要存在于移动端

移动端直接用jquery,会有一些小问题,推荐选用轻量移动端的js框架zepto等。

document.getElementById('BtnLogin').addEventListener('tap',function(){}
你用tap的话,移动端会有点透现象或者双击现象,建议调用fastclick这个库
$(function(){
    newFastClick(document.body);
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题