zoukankan      html  css  js  c++  java
  • js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现:

    一:javascript实现方法技巧
    <script>
    //定义stopPropagation 方法的使用,该方法将停止事件的传播,阻止它被分派到其他 Document 节点。
     function stopFunc(e) {
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
        };
    //获取元素的ID
     function $(id) {
           return document.getElementById(id);
       };
    //初始化加载
        window.onload = function () {
            document.onclick = function (e) {
                $("element").style.display = "none";
            }
            $("btn按钮").onclick = function (e) {
                $("element").style.display = "block";
                e = e || event;
              stopFunc(e);
            }
            $("element").onclick = function (e) {
                e = e || event; stopFunc(e);
            }
        }  
    </script>

    二:jquery实现方法技巧:
    <script>
    $("#btn按钮").on("click", function(e){
        $("#element").show();
        $(document).one("click", function(){
            $("#element").hide();
        });
        e.stopPropagation();
    });
    </script>
    有更多更好的想法的朋友可以联系我Q:1159268659
  • 相关阅读:
    @hdu
    @51nod
    @51nod
    @51nod
    JS-正则表达式常规运用
    CSS-复选框默认样式修改
    Vue-路由传参query与params
    Vue-阻止页面回退
    Vue-表单提交
    JS-原生的ajax
  • 原文地址:https://www.cnblogs.com/cqj98k/p/10031395.html
Copyright © 2011-2022 走看看