window阻止冒泡事件

最新推荐文章于 2024-09-11 22:31:16 发布

你的美，让我痴迷

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量215

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45932157/article/details/133698861

版权

 <!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>
        .publisher_TpAsB.border_NWmBE {
            border: 1px solid #d7d9e0;
        }
        
        .publisher_TpAsB {
            zoom: 1;
            background-color: #fff;
            display: flow-root;
            width: 900px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .publisher-wrap_x5sK8 .panel_LE9IL {
            position: relative;
        }
        
        .publisher-wrap_x5sK8 .textarea_SITY3 {
            background-color: transparent;
            border: none;
            border-bottom: 0 solid transparent;
            color: #333;
            display: block;
            font-size: 13px;
            height: 32px;
            line-height: 32px;
            margin: 0;
            outline: none;
            overflow-y: auto;
            padding: 0;
            position: relative;
            resize: none;
            transition: height .6s, margin-left .6s, border-bottom .6s;
        }
        
        .publisher-wrap_x5sK8 .opt_XgXqH {
            bottom: 0;
            height: 32px;
            left: 0;
            position: absolute;
            width: 100%;
        }
        
        .publisher-wrap_x5sK8 .opt-emoji_L2LHq {
            background-image: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/xib-emoj-btn2.png);
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
            float: left;
            height: 20px;
            margin-top: 6px;
            width: 20px;
        }
        
        .publisher-wrap_x5sK8 .opt-btn_fUCxn {
            background: #4e6ef2;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            float: right;
            font-size: 14px;
            font-weight: 400;
            height: 32px;
            line-height: 32px;
            text-align: center;
            user-select: none;
            width: 80px;
        }
    </style>
</head>

<body>
    <div class="publisher_TpAsB border_NWmBE" style=" border-radius: 8px">
        <div class="publisher-wrap_x5sK8" style="margin:0;padding:8px 8px 8px 12px;background-color:#FAFAFC;border-radius:8px;">
            <div class="panel_LE9IL">
                <textarea class="textarea_SITY3" placeholder="看热搜，发弹幕～" style="width: 150px; height: 32px; line-height: 32px; margin-left: 28px; border-bottom-width: 0px;border: 1px solid red;"></textarea>
                <!-- <textarea class="textarea_SITY3" placeholder="看热搜，发弹幕～" style="width: 100%; height: 55px; line-height: 21px; margin-left: 0px; border-bottom-width: 40px;"></textarea> -->
                <div class="opt_XgXqH"><span class="opt-emoji_L2LHq"></span>
                    <div class="opt-btn_fUCxn ">发表</div>
                    <!--455-->
                    <!--456-->
                </div>
            </div>
        </div>
    </div>

    <script>
        window.addEventListener("click", function() {
            document.querySelector(".textarea_SITY3").style = "width: 100%; height: 55px; line-height: 21px; margin-left: 0px; border-bottom-width: 40px;";
        })
        document.querySelector(".textarea_SITY3").addEventListener("click", function(event) {
            window.event ? window.event.cancelBubble = true : event.stopPropagation();
            document.querySelector(".textarea_SITY3").style = "width: 150px; height: 32px; line-height: 32px; margin-left: 28px; border-bottom-width: 0px;";
        })
    </script>
</body>

</html>