点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏

蔚落 2022-01-29 09:35 348阅读 0赞

<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />  
                            <div id="pop" class="centerDiv radius" style="width: 260px; height: 100px; border:1px solid \#ddd; background:\#f7f7f7; color:\#000;">  
                                当点击按钮后显示隐藏层，满足鼠标在div里操作不隐藏，在外边点击会消失的功能。  
                                逻辑上主要是阻止浏览器的冒泡<br />

</div>

<script type="text/[JavaScript][]">  
         
        //点击\#btnClick时要阻止冒泡，否则.pop是不显示的，  
        //因为冒泡了，会执行到下面的方法。  
        function stopPropagation(e) \{  
            var ev = e || window.event;  
            if (ev.stopPropagation) \{  
                ev.stopPropagation();  
            \}  
            else if (window.event) \{  
                window.event.cancelBubble = true;//兼容IE  
            \}  
        \}  
        $("\#btnClick").click(function (e) \{  
            $("\#pop").show();  
            stopPropagation(e);  
        \});  
        $(document).bind('click', function () \{  
            $("\#pop").hide();  
        \});  
        $("\#pop").click(function (e) \{  
            stopPropagation(e);  
        \});  
    </script>

[JavaScript]: http://lib.csdn.net/base/javascript

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 js控制div点击隐藏显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta n

比眉伴天荒/ 2022年09月26日 15:49/ 0 赞/ 242 阅读

相关 js实现点击显示一个div,点击其他任何地方div消失

https://bbs.csdn.net/topics/390853007 https://www.itranslater.com/qa/details/2125411084

港控/mmm°/ 2022年09月16日 14:16/ 0 赞/ 205 阅读

相关点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏

<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />

一时失言乱红尘/ 2022年05月23日 13:53/ 0 赞/ 255 阅读

相关实现点击页面其他地方，隐藏div（vue）

方法一：　　　　通过监听事件 document.addEventListener('click',function(e){

布满荆棘的人生/ 2022年05月09日 09:34/ 0 赞/ 380 阅读

相关点击一个按钮隐藏和显示div

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击一个按钮隐藏

一时失言乱红尘/ 2022年05月09日 06:56/ 0 赞/ 258 阅读

相关点击其他区域，隐藏div

<div id='test'></div> 点击其他区域关闭这个div <script type="text/javascript"> $(document).bi

亦凉/ 2022年05月04日 03:58/ 0 赞/ 276 阅读

相关 js/jq 点击按钮显示div,点击页面其他任何地方隐藏div

1. JS效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Content

深碍√TFBOYSˉ_/ 2022年04月18日 06:32/ 0 赞/ 294 阅读

相关除指定区域外点击任何地方隐藏DIV

方式一: <div class="btn" id="btn">btn</div> <div class="box"></div>

短命女/ 2022年04月04日 05:17/ 0 赞/ 217 阅读

相关点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏

<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />

蔚落/ 2022年01月29日 09:35/ 0 赞/ 349 阅读

相关除指定区域外点击任何地方隐藏DIV

html如下： <div class="btn" id="btn">btn</div> <div class="box"></div> jq

约定不等于承诺〃/ 2021年09月11日 08:38/ 0 赞/ 287 阅读