如何在div外部单击鼠标时隐藏div
在div外部单击鼠标时隐藏div，可以通过以下几种方式实现：
- 使用JavaScript事件监听器：在div外部单击鼠标时触发事件，通过修改div的CSS样式来隐藏div。具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
display: block;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
document.addEventListener('click', function(event) {
var myDiv = document.getElementById('myDiv');
if (!myDiv.contains(event.target)) {
myDiv.style.display = 'none';
}
});
</script>
</body>
</html>- 使用jQuery库：jQuery提供了方便的事件处理方法，可以简化代码实现。具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
display: block;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
$(document).click(function(event) {
var myDiv = $('#myDiv');
if (!myDiv.is(event.target) && myDiv.has(event.target).length === 0) {
myDiv.hide();
}
});
</script>
</body>
</html>以上两种方式都是通过判断点击事件的目标元素是否在div内部来决定是否隐藏div。
相关·内容
3回答
我有一个HTML div，只要用户在div之外的任何地方单击页面，我就想隐藏它。点击哪个元素应该触发onclick事件？？
浏览 3提问于2010-11-29得票数 3
回答已采纳
我有两个div标签，它模仿下拉菜单。当点击外部div时，内部div显示在下面，并有一些链接。我希望只有当鼠标离开任何一个div时，内部div才能隐藏自己。单击外部div。不进入内部div。将鼠标向上、左或右移动以离开外部div。内部div应该
浏览 5提问于2011-07-27得票数 0
回答已采纳
如果鼠标单击div的子元素外部，我有一个代码来隐藏div。但是，只有当我单击外部时，它才能工作。JQuery1.8可以正常工作，但我需要使用1.3.2，即使鼠标单击了内部或这个元素或它的任何子元素，我也需要打开该元素。
浏览 4提问于2013-11-08得票数 0
回答已采纳
3回答
我想让它作为默认下拉操作，就像当我点击div外部时隐藏所有选项一样。只要我试图做到这一点，我就可以在div外部单击所有选项(在文档中)。但是当我点击浏览器URL或页面标题时，下拉列表并不隐藏。{}
width: 80%;
.dvCustomSelectclass='
浏览 7提问于2015-05-15得票数 4
回答已采纳
1回答
在那里，鼠标悬停在每个图像上都会显示一个标题！这不是一个div，但我认为它是一个javascript数据标题函数！我不想那样！我想要这样的怎么做？任何人？
浏览 1提问于2013-07-18得票数 0
4回答
单击外部时隐藏div
、、、
我有一个隐藏的div，打开一个链接文本的点击。我需要隐藏div，并在用户单击主体上任何地方的active之外时，从链接文本中删除div类。我已经使用body onclick来隐藏div，但是它也在隐藏div单击。我不想关闭div只在身体点击，而不是在div点击。如何在div单击时</e
浏览 6提问于2018-01-10得票数 0
回答已采纳
4回答
当用户单击名为#startMnu的div时，我想隐藏div #startMnu。使用本教程，我无法让它工作，因为无论我单击什么地方，它都说它不在框内。我试着做一个菜单，在那里你可以点击菜单按钮，打开它，并关闭它要么再次单击按钮，或点击退出div。现在，我点击的任何地方都会弹出警报。想法？cdnl.accucutcraft.com/media/catalog/product/cache/2/im
浏览 3提问于2016-05-18得票数 1
回答已采纳
我遇到这样一种情况，当鼠标单击时，javascript函数设置<div>的innerHTML。我希望在单击鼠标时将<div>加载到模式弹出窗口中。document.getElementById('pop').innerHTML = '<iframe seamless id="info_iframe" src="some_url"></
浏览 4提问于2015-11-24得票数 0
1回答
我有一个由div表示的对话框，当我在此div之外的某个地方单击时，我想关闭它。dialog-wrapper")) { }
}); 工作示例如下所示： https://jsfiddle.net/ho2p3fnc/ 当我在div之外单击时，它工作正常。当我在div里面点击的时候，它工作正常。 但是，当我从
浏览 25提问于2019-04-23得票数 0
回答已采纳
2回答
然后在单击anywhere或单击先前悬停的按钮时隐藏。我有可以工作的代码，但如果单击按钮，它会切换悬停效果。按钮悬停div显示，按钮单击= div隐藏在悬停和鼠标移动后显示按钮
我想让div隐藏时，按钮被点击，并保持隐藏后，<
浏览 5提问于2015-05-16得票数 0
回答已采纳
2回答
$('#map_n_vilage').show(); }
当我单击链接div时，将打开一个#our_location #locations。当我单击#locations中的任何锚标记时，ajax都会被调用，并显示#map_n_vilage div ...现在我想要的是，如果我点击这些div之外的任何其他东西，我所有的这些d
浏览 0提问于2013-03-15得票数 0
6回答
div的css如下： display: none; z-index: 500; width: 60%;#info");
container.hide();});
然而，每当我单击div时，它也会消失，不知道为什么，但它确实消失了。
浏览 2提问于2012-07-18得票数 20
回答已采纳
我使用了一个动画：$("#innerDiv").hide(400)，但只要外部<div>被隐藏，内部<div>就不会被隐藏，稍后当我取消隐藏外部<div>时，它是可见的。如果显示了外部<div>，则内部<div>会像预期的那样通过动画隐藏起来。
我不期望当外部<
浏览 2提问于2012-07-25得票数 2
1回答
这就是我到目前为止所拥有的:例如，当我单击button1时，content1显示，当我单击button2时，content1关闭，content2出现。).fadeOut(); });
我想要做的是保持这个功能，但是添加一些东西:如果content1已经打开了，当我点击它的按钮(button1)时切换它，当在content1目录之外单击时也切换它。简而言之，我想在除div本身之外的任何地方
浏览 16提问于2016-09-25得票数 0
回答已采纳
0回答
如何在外部单击时隐藏div
、、、、
建议列表的div在搜索服务器中的名称时显示并在没有结果时消失， this.searchplaceholder="Search" (keyup)="getSuggestion($event.target.value)" (change)="onChange($event.target.value)">
<divclass=&quo
浏览 1提问于2017-06-23得票数 0
回答已采纳
我有这样的HTML标记 <div class="wrapper"> <div class="content-container">
浏览 1提问于2015-01-14得票数 0
9回答
我有一个div，当我点击外部时，我想隐藏它。我的代码是：
$('#mydiv').click(function(e) {当我点击一个按钮时，上面显示了一个div，所以当我点击外部时，我需要隐藏这个<
浏览 0提问于2012-12-15得票数 13
回答已采纳
5回答
我有以下部门： <div id="content"></div>当用户单击anywhere 但在div内单击时，我想隐藏div#welcome-lightbox-box').click(function(event){
浏览 3提问于2013-12-06得票数 1
回答已采纳
5回答
rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">
这是一个div当display:none在div内单击时，按钮将切换样式。<div id="cal1_0Container" style="clear: both; position: absolu
浏览 9提问于2016-08-27得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
