文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在没有jQuery的情况下在外部单击时模糊div

在没有jQuery的情况下，在外部单击时模糊div可以通过原生JavaScript来实现。以下是一个实现该功能的示例代码：

代码语言：txt
复制
<!DOCTYPE html>
<html>
<head>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            opacity: 0.5;
            filter: blur(5px);
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="toggleDiv()">显示/隐藏</button>
    <div id="myDiv"></div>

    <script>
        var myDiv = document.getElementById("myDiv");

        function toggleDiv() {
            if (myDiv.style.display === "none") {
                myDiv.style.display = "block";
                document.addEventListener("click", outsideClick);
            } else {
                myDiv.style.display = "none";
                document.removeEventListener("click", outsideClick);
            }
        }

        function outsideClick(event) {
            if (!myDiv.contains(event.target)) {
                myDiv.style.display = "none";
                document.removeEventListener("click", outsideClick);
            }
        }
    </script>
</body>
</html>

这段代码创建了一个按钮和一个带有模糊效果的div。点击按钮时，div会显示或隐藏。当div显示时，点击div外部的任何地方都会使div隐藏起来。

这个功能的实现原理是通过给document对象添加click事件监听器，在点击事件发生时判断点击的目标元素是否在div内部。如果不在div内部，则隐藏div。通过添加和移除事件监听器，可以控制点击事件的触发和取消。

这个功能可以应用于各种场景，例如点击弹出层外部关闭弹出层、点击菜单外部关闭菜单等。

腾讯云相关产品和产品介绍链接地址：

  • 云服务器（CVM）：https://cloud.tencent.com/product/cvm
  • 云函数（SCF）：https://cloud.tencent.com/product/scf
  • 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
  • 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
  • 云存储（COS）：https://cloud.tencent.com/product/cos
  • 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
  • 腾讯会议：https://cloud.tencent.com/product/tc-meeting
  • 腾讯云智能视频（IVP）：https://cloud.tencent.com/product/ivp
  • 腾讯云智能语音（TTS）：https://cloud.tencent.com/product/tts
  • 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
  • 移动推送（TPNS）：https://cloud.tencent.com/product/tpns
相关搜索:在不使用窗口和文档对象的情况下在外部单击时隐藏div单击时显示/隐藏div，在div外部单击时切换在没有外部计算的情况下在ECDF上添加点在DIV外部单击时重置评级在div外部单击时弹出关闭在div外部单击时隐藏子菜单在不使用JQuery的情况下在滚动位置更改div样式当用户在div外部单击时，如何隐藏该div？在不使用Jquery的情况下，在单击时循环浏览div内容CSS/JQuery在单击时设置DIV动画在jquery中单击按钮时切换DIV在容器外部单击窗口时关闭模式- jQuery单击元素外部时的jQuery触发事件在没有Bootstrap的情况下在文本内容上创建响应式div使用jQuery在单击标签时隐藏某个divjquery在没有单击的情况下执行声明的函数在子级onClick外部单击时隐藏分区Div | ReactJS如何在不透明度增加的情况下在按钮单击时转换div？在不重新加载的情况下在单击时更新页面url在没有外部库的情况下在C#中播放动态创建的简单声音
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

在没有源代码的情况下对Linux二进制代码进行模糊测试

在drAFL的帮助下，我们就可以在没有源代码的情况下对LInux二进制代码进行模糊测试了。 ?...drAFL 原始版本的AFL支持使用QEMU模式来对待测目标进行黑盒测试，因此在使用drAFL之前，作者强烈建议大家先尝试使用一下原始版本的AFL，如果达不到各位的目标，再来使用drAFL。...除此之外，你还需要设置AFL的fork服务器（AFLNOFORKSRV=1），或者设置“AFLSKIPBIN_CHECK=1”。具体请参考代码构建部分的第五步。...注意：请注意，针对64位代码库，你需要使用64位的DynamoRIO，如果使用的是32位的代码库，你就需要使用32位的DynamoRIO了，否则工具将无法正常运行。.../afl_test @@ 注意：对于afl_test测试样例，可能需要大概25-30秒的执行时间。

1.5K10

    • JavaScript 开发者需要了解的15个 DevTools 技巧

    查找未使用的 JavaScript Chrome 的 Coverage 面板可以让你能够快速找到 JavaScript 有没有被使用。...单击任何 JavaScript 文件，未使用的代码会用红条突出显示。 5. 找到DOM更改代码 当事件被触发时，很难确定哪个函数负责更新特定的 HTML DOM 元素。...网速节流 在快速，可靠的网络上使用高性能的设备测试你的站点可能并不能表示实际使用情况。你的用户可能处在慢速的网络环境下。...这可以让你: 在不需要构建工具的情况下在实时编辑脚本或样式 离线开发一个网站，该网站通常会要求第三方域提供基本文件 临时替换不必要的脚本，例如 analytics。...可以在 Chrome 中或使用任何代码编辑器来编辑文件，每当重新加载页面时，都将使用更新的版本。 14. 管理客户端存储 网页可以使用多种技术将数据存储在客户端上。

    4.8K20

    jQuery 双击事件（dblclick）时，不触发单击事件(click)

    出处：jQuery 双击事件（dblclick）时，不触发单击事件(click) 在jQuery的事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素（如div等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick...)时却会触发两次单击事件(click)。...mouseout，click，dblclick； 在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。...}) 从测试结果来看，如果前后两次点击的时间在 300ms 左右的时候，还是很容易出现 click 和 dblclick 事件被“同时”调用的情况，而如果间隔的时间更短或更长，则只会有 click 或

    5.3K30

    Web API--入门--（一）ASP.NET Web API 2（C＃）入门

    我正在使用本教程的空模板，因为我想显示没有MVC的Web API。一般来说，你不需要知道ASP.NET MVC来使用Web API。 添加模型 一个模型是代表你的应用程序中的数据的对象。...当然，在实际应用中，您可以查询数据库或使用其他外部数据源。 控制器定义了返回产品的两种方法： 该GetAllProducts方法将整个产品列表作为IEnumerable 类型返回。...使用Javascript和jQuery调用Web API 在本节中，我们将添加一个使用AJAX调用Web API的HTML页面。我们将使用jQuery来进行AJAX调用，并且还可以使用结果更新页面。...jQuery getJSON函数发送一个AJAX请求。对于响应包含JSON对象的数组。该done函数指定在请求成功时调用的回调。在回调中，我们使用产品信息更新DOM。...如果您输入的ID无效，则服务器返回HTTP错误： ? 使用F12查看HTTP请求和响应 当您使用HTTP服务时，查看HTTP请求和请求消息非常有用。

    4.2K10

    继续死磕前端

    大可放心，jquery 有容错机制，即使没有找到元素，也不会出错。还为你提供了验证是否找到的方法，那便是 length 属性。...（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理...，它有两种情况： 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中 创建新标签 var $div = $(''); //创建一个空的div var $div2 = $('... 2、 prepend() 和 prependTo()：在现存元素的内部，从前面放入元素 3、 after() 和 insertAfter()：在现存元素的外部...，从后面放入元素 4、 before() 和 insertBefore()：在现存元素的外部，从前面放入元素 删除标签 $('#div1').remove(); 3.4 对象 JavaScript 的对象

    2.8K10

    【jQuery动画】显示与隐藏效果

    jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。...fn：在动画完成时执行的函数。 实现效果 当点击“显示”，则div中的内容会显示，并弹出提示框，点击“隐藏”则隐藏内容，弹出提示框，点击“切换”，则会在二者之间切换。...> jQuery部分 思路： 1、引入jQuery，如图 2、添加ready函数，ready是jQuery的文档就绪函数，它用于防止文档在完全加载之前允许jQuery...代码，如果在文档没有完全加载之前就运行函数，操作可能失败； 3、给三个按钮添加点击事件，这里用到筛选选择器eq； 4、实现单击显示按钮，控制div元素的显示（show），并弹出提示框（alert）；...5、实现单击隐藏按钮，控制div元素的隐藏（hide），并弹出提示框； 6、实现单击切换按钮，控制元素显示与隐藏切换（toggle）。

    6.7K10

    Ajax与jQuery异步加载数据

    的div将展示Ajax数据 (document).ready(function(){})指页面其他元素加载完成后开始加载Ajax数据，此时，浏览器不会有加载条和转圈的情况出现。...在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。...一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。...不过开发者已想出了种种办法来解决这个问题，HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。...（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。

    10.9K20

    js事件防止冒泡

    jQuery对这个事件对象进行了必要的扩展，从而在不论什么浏览器中都能够使用这个属性。通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。...默认操作 假设我们把单击事件处理程序注冊到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时。浏览器会载入一个新页面。...在这样的情况下，.preventDefault()方法则能够在触发默认操作之前终止事件 。 提示 当在事件的环境中完毕了某些验证之后，一般会用到.preventDefault()。比如。...事件传播和默认操作是相互独立的两套机制，在二者不论什么一方发生时，都能够终止还有一方。假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。...这是对在事件对象上同一时候调用.stopPropagation()和.preventDefault()的一种简写方式。

    2.5K40

    Jump Start Bootstrap 第4章

    现在，我们有了一个简单的下拉菜单，在单击链接时显示菜单。我们可以在浏览器中查看它，如图所示。 ? 让我们结合使用下拉式插件和我们在前一章中创建的标签和按钮菜单。...Bootstrap为下拉插件提供了一些附加事件,它们是： show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单； shown.bs.dropdown: 这个事件在菜单被显示时触发...当你点击按钮时，你会看到一个类似于插图效果的样式;在再次单击时，它返回到原来的样式，如图所示。data-toggle=”button”实现了这个切换功能。 ?...添加data-dismiss使按钮在单击时关闭模式对话框。 对于本体，我们需要一个包含类modal-body的元素。您可以将几乎任何内容放到该元素中。...它应该有一个data-target属性来告诉Bootstrap，在一个网页中可以有多个模式对话框。我们还需要定义的data-toggle属性来确定单击时触发的内容。

    28.3K40

    AJAX常见面试问题

    3.有没有遇到过这种情况 在ie浏览器中 后台图片数据已经改变 但是客户端没有发生改变 该怎么处理？...缺点： .AJAX干掉了Back和History功能，即对浏览器机制的破坏。 在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。...一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。...答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时...（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）

    1.8K20

    前端之jquery函数库

    @#$%^&*]{6,20}$/; //手机号码验证： var rePhone = /^1[34578]\d{9}$/;　 事件冒泡 什么是事件冒泡  在一个对象上触发某类事件（比如单击onclick...，它有两种情况： 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中 创建新标签 var $div = $(''); //创建一个空的div var $div2 = $('... 2、prepend()和prependTo()：在现存元素的内部，从前面放入元素 3、after()和insertAfter()：在现存元素的外部，从后面放入元素...4、before()和insertBefore()：在现存元素的外部，从前面放入元素 删除标签 $('#div1').remove(); javascript对象 　　javascript中的对象，可以理解成是一个键值对的集合...，不能是其他域的资源，这是在设计ajax时基于安全的考虑。

    5.2K20

    阻止a标签的默认事件及延伸

    看如下实例： (1)把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事，因为默认操作不是在正常的事件传播流中发生的。...在这种情况下，处理方法有： 1、w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false; preventDefault它是事件对象(Event)的一个方法...当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

    2.5K60

    用 Javascript 和 Node.js 爬取网页

    正则表达式：艰难的路 在没有任何依赖性的情况下，最简单的进行网络抓取的方法是，使用 HTTP 客户端查询网页时，在收到的 HTML 字符串上使用一堆正则表达式。...Cheerio：用于遍历 DOM 的核心 JQuery Cheerio 是一个高效轻便的库，它使你可以在服务器端使用 JQuery 的丰富而强大的 API。...然后在浏览器的 Dev Tools 帮助下，可以获得可以定位所有列表项的选择器。如果你使用过 JQuery，则必须非常熟悉 $('div> p.title> a')。...resources：设置为“usable”时，允许加载用 script 标记声明的任何外部脚本（例如：从 CDN 提取的 JQuery 库） 创建 DOM 后，用相同的 DOM 方法得到第一篇文章的...✅ Cheerio 把 JQuery 的优点抽出来，在服务器端 进行 Web 爬取是唯一的目的，但不执行 Javascript 代码。

    10.1K10

    jquery对象和dom对象的相互转换

    2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。...如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可 以使用dom中的方法，但不能再使用Jquery的方法。...对于jquery对象只能使用 jquery的方法，而dom对象只能使用dom的方法，如要获取第三个元素的内容。...有如下两种方法： $("div").eq(2).html();     //调用jquery对象的方法 $("div").get(2).innerHTML;   //调用dom的方法属性 4、同一函数实现...，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

    3.3K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券