点击某个元素及点击某个元素之外的地方

  • 点击某个元素及点击某个元素之外的地方
<!DOCTYPE html>
<html>
    <style>
        .left {
            width: 100px;
            height: 200px;
            background: red;
            float: left;
        }
        .right {
            height: 300px;
            background-color: blue;
            overflow: hidden;
        }
    </style>
    <body>
        <div>
            <div class="left">
                <p id="myElement">left-p</p>
            </div>
            <div class="right">right</div>
        </div>
        <script type="text/javascript">
            document.addEventListener('click', function(evt) {
                const ele = document.getElementById('myElement');
                console.log('ele: ', ele);
                // isClickedOutside 为 true 如果点击的元素在 ele 之外
                const isClickedOutside = !ele.contains(evt.target)
                console.log('isClickedOutside:', isClickedOutside)
            })
        </script>
    </body>
    
</html>
posted @   安静的嘶吼  阅读(13)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
历史上的今天:
2020-07-30 react-router
点击右上角即可分享
微信分享提示