放弃只需一秒钟 2021-10-26 14:25 采纳率: 57.1%
浏览 34
已结题

为何click事件点击后转瞬即逝,跳出来点击事件后立马又回去了

问题如题,代码如下:
请问为什么当我点击了鼠标之后,虽然出发了js中的click函数,但是转瞬即逝,又返回之前的页面了?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .bgc {
            display: none;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;   
            background-color: gray;
            z-index: -1;
        }
        label {
            display: inline-block;
            width: 100px;
            height: 35px;
            text-align: center;
        }

        .header a {
            display: block;
            text-align: center;
            text-decoration: none;
            font-size: 30px;
            color: black;
        }
        .login {
            display: none;
            width: 500px;
            height: 300px;
            /* border: 2px solid black; */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: pink;
        }
        .login-header {
            text-align: center;
            margin-top: 20px;
            font-size: 20px;
            position: relative;
        }
        .login-header a {
            text-decoration: none;
            border: 3px solid black;
            font-size: 15px;
            color: red;
            position: absolute;
            right: 0px;
            top: -20px;
        }
        .login-body {
            margin: 70px;
            /* border: 1px solid red; */
        }
        .login-input {
            margin: 10px;
            font-size: 20px;
        }

        .login-button {
            text-align: center;

        }
        input {
            height: 30px;
            width: 190px;
        }
        .login-button button a {
            text-decoration: none;
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="header"><a href="">点击,弹出登录框</a></div>
    <div class="login">
        <div class="login-header">登陆会员
            <span><a href="" class="closeBtn">关闭</a></span>
        </div>
        <div class='login-body'>
            <div class='login-input'>
                <label for="">用户名:</label>
                <input type="text" placeholder="请输入用户名">
            </div>
            <div class='login-input'>
                <label for="">密码:</label>
                <input type="password" placeholder="请输入密码">
            </div>
            <div class="login-button"><button><a href="">登录</a></button></div>
        </div>
    </div>
    <div class="bgc"></div>

    <script>
        var header = document.querySelector('.header');
        var login = document.querySelector('.login');
        var bgc = document.querySelector('.bgc');
        header.addEventListener('click',function() {
            login.style.display = 'block';
            bgc.style.display = 'block';
        })
    </script>
</body>
</html>

  • 写回答

2条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2021-10-26 14:35
    关注

    因为a标签是超链接,会根据href跳转,你的href为空,所以刚打开框框就执行了默认的跳转(跳回本页)
    所以要去除a标签默认事件

        header.addEventListener('click', function (e) {
          e.preventDefault()
          login.style.display = 'block';
          bgc.style.display = 'block';
        })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 11月3日
  • 已采纳回答 10月26日
  • 创建了问题 10月26日