web API-事件基础-点击关闭淘宝二维码

最新推荐文章于 2024-07-18 18:43:34 发布

Q _Q

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量99

点赞数

文章标签：前端 html css javascript css3

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131601312

版权

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<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>事件案例-点击关闭二维码</title>
    <style>
        .qrCode {
            position: relative;

            width: 160px;
            height: 160px;

            margin: 100px auto;
        }

        span {
            position: absolute;
            left: -20px;
            top: 0;

            display: block;
            width: 20px;
            text-align: center;
            border: 1px solid #ccc;

            /* 鼠标效果 */
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="qrCode">
        <img src="images/code.png" alt="" />
        <span> X </span>
    </div>

    <script>
        // 需求：点击关闭之后，淘宝二维码关闭
        // 分析：
        //     ①：点击的是关闭按钮
        //     ②：关闭的是父盒子
        //     核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素 

        // 获取事件源
        let closeBtn = document.querySelector('.qrCode span')

        // 添加事件监听
        closeBtn.addEventListener('click', function(){
            // 事件三要素写完后，一定要log一下检查
            // 好习惯：模块化log检查 避免bug难找
            // console.log('X 被点击了')
            
            // 获取二维码对象
            let qrCode = document.querySelector('.qrCode')
            // 隐藏二维码
            qrCode.style.display = 'none'
        })


    </script>
</body>

</html>

效果图：