jQuery实现点击div外的区域,来隐藏指定节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).bind(‘click‘, function(e) {
                var e = e || window.event; //浏览器兼容性
                var elem = e.target || e.srcElement;
                while (elem) { //循环判断至跟节点,防止点击的是div子元素
                    if (elem.id && (elem.id == ‘test‘ || elem.id == ‘test2‘)) {
                        return;
                    }
                    elem = elem.parentNode;
                }
                $(‘#a‘).css(‘display‘, ‘none‘); //点击的不是div或其子元素
            });
        </script>
    </head>  

    <body>
        <div id="a">
            <div id="test" style="width: 300px; height: 300px; background-color: palegreen;">

测试测试测试测试

</div>
            <div id="test2" style="width:100px;height:100px;background:gold;">测试测试测试测试</div>
        </div>
    </body>  

</html>  

原文地址:https://www.cnblogs.com/cap-rq/p/9967024.html

时间: 2024-10-18 16:24:50

jQuery实现点击div外的区域,来隐藏指定节点的相关文章

怎么点击div之外的区域就隐藏这个div啊 找了很久,都没有很好解决

方法一. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body> <span onClick="with(document.getElementById(

JQuery实现点击div以外的位置隐藏该div窗口

简单示例代码: <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(document).bind("click&

jquery点击div以外的区域触发事件

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>网页特效展示中心</title> 5 <style type="text/css"> 6 #testa,#testa2{position:relative;} 7 #pop,#po

js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button> <ul class="menu"> <li><a href="#">首页</a>

判断鼠标点击在div外时,更改背景图片

学习起步时,本人试着在web端界面上仿照qq客户端主菜单,做出了一个界面. 当做到qq主菜单的搜索框时,发现点击搜索框后,里面的背景图片会消失,如下面2张图所示:      点击前                                                                      点击后 尽管类似这种判断鼠标是否点击在div外,以更改背景图片的应用在web开发中并不多见,但是我们还是需要明白,应如何实现对鼠标是否点击在div外的判断. 在这里,我采用了如下代

jquery点击div 先变大再缩小

<!DOCTYPE html><html>  <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>        &l

jquery判断点击事件是否为指定区域

<script type="text/javascript"> $(document).click(function(e){ e = window.event || e; var obj = e.srcElement || e.target; if(!$(obj).is("#keywords-area ul li")) { $("#keywords-area").hide(); } }); </script> 说明: 1.

点击空白区域隐藏指定元素实例代码

点击空白区域隐藏指定元素实例代码:此效果不是无的放矢的,当然正常的应用应该没有这么简单,一般都是和其他的功能结合在一起的,比如自定义select下拉菜单,点击空白区域的时候可以隐藏下拉菜单,本章节就是单独拿出这个功能做一下简单的介绍.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content=&

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=