如何在div外部单击和隐藏，以及当我将其拖动到div外部时保持隐藏(mouseup，mousedown...)Jquery
在div外部单击和隐藏的需求可以通过以下步骤实现：
- 首先，给需要隐藏的div添加一个唯一的id属性，例如id="myDiv"。
- 使用jQuery库，可以通过以下代码来实现在div外部单击隐藏的效果：
$(document).mouseup(function(e) {
var container = $("#myDiv");
// 如果点击的目标不是myDiv本身且不是myDiv的子元素，则隐藏myDiv
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});上述代码中，mouseup事件会在鼠标按键松开时触发。当点击的目标不是myDiv本身且不是myDiv的子元素时，即点击了div外部区域，就会隐藏myDiv。
- 如果需要在将div拖动到div外部时保持隐藏，可以在mousedown事件中添加一个标记，表示鼠标是否按下。然后在mouseup事件中判断该标记，如果为true，则隐藏myDiv。
var isMouseDown = false;
$(document).mousedown(function(e) {
var container = $("#myDiv");
// 如果点击的目标是myDiv本身或myDiv的子元素，则将isMouseDown标记为true
if (container.is(e.target) || container.has(e.target).length > 0) {
isMouseDown = true;
} else {
isMouseDown = false;
}
});
$(document).mouseup(function(e) {
var container = $("#myDiv");
// 如果isMouseDown为true且点击的目标不是myDiv本身且不是myDiv的子元素，则隐藏myDiv
if (isMouseDown && !container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
isMouseDown = false; // 重置isMouseDown标记
});上述代码中，mousedown事件会在鼠标按下时触发，mouseup事件会在鼠标按键松开时触发。当点击的目标是myDiv本身或myDiv的子元素时，将isMouseDown标记为true，表示鼠标按下。在mouseup事件中，如果isMouseDown为true且点击的目标不是myDiv本身且不是myDiv的子元素，则隐藏myDiv，并重置isMouseDown标记。
以上是使用jQuery实现在div外部单击和隐藏的方法。关于jQuery的更多用法和详细介绍，可以参考腾讯云的jQuery产品文档：jQuery产品介绍。
相关·内容
大家好，我想学习如何在我的中使用jquery fadeToggle
在这个演示中，您可以看到有一个点击显示div。当您单击此div时，.gelen-mesaj-alani将显示。我的问题是，当点击其他区域时，如何隐藏这个div？
$(document).ready(function(){
$('.click').on('click',function(){
$(".gelen-mesaj-alani").fadeToggle(300);
});
});
浏览 1提问于2015-02-12得票数 0
回答已采纳
3回答
我正在使用JS modal (没有jquery)，因为我对这种方法有一些问题……
一切都很好，除了在移动用户无法关闭它。
var modal = document.getElementById('myModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
可能和我错过的那次接触有关...
我尝试过这样的jquery：
$(document).ready(function()
浏览 14提问于2016-08-01得票数 0
1回答
大家好，我如何通过点击其他地方来关闭jquery的菜单。
<div class="noticemenu">
<label for="menu-toggle3"></label>
<input type="checkbox" id="menu-toggle3"/>
<ul id="menu">
<li class="option">
<a href="#
浏览 1提问于2015-07-28得票数 0
2回答
我有一个登录链接，点击它，将显示一个div。在单击链接时，我希望在隐藏和显示该div之间切换。此外，当用户单击div外部时，我需要隐藏div。
我所做的如下：
$(document).ready(function() {
$("#poplink").click(function() {
$('#popup').toggle();
});
$(document).mouseup(function(e) {
var container = $("#popup");
if (!co
浏览 3提问于2014-01-04得票数 0
回答已采纳
我正在处理多语言下拉列表，但我的jQuery代码中出现错误。 获取此错误(e.target) TS2345：'Document‘类型的实参不能赋值给'string | Element | JQuery | Element[] |(this: HTMLElement，index: number，element: HTMLElement) => boolean)’类型的参数。类型“Document”缺少类型“Element”的以下属性: assignedSlot、attributes、classList、className等58个属性。 $(document).mouseu
浏览 13提问于2019-05-10得票数 0
2回答
我的折叠器工作得很好
HTML：
<button class="btn btn-primary">Click</button>
<div class="text" style="display:none">Some text</div>
jQuery：
$(".btn").click(function(e){
$(".text").fadeToggle('fast');
});
然后，我添加了下面的内容，当我点击外部时隐藏文本，而现在切换功能不
浏览 1提问于2014-06-01得票数 1
回答已采纳
5回答
单击按钮时隐藏并显示
、、、、
我有这样的代码(HTML/CSS/JS)：
$('.subnav__right li a').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('.subnav__hover');
$('.subnav__hover').not($this).hide();
$this.toggle();
});
$(document).mouseup(function (e)
{
浏览 5提问于2015-06-11得票数 1
回答已采纳
2回答
我知道有很多关于这个问题的帖子，我试过几个代码，认为它在我的代码中很好用，但后来我发现，只有当我点击使其弹出的同一个<div>时，以及当我点击#main <div>之外的任何地方时，它才能起作用(隐藏)。因此，如果我在#main <div>中的任何地方单击，弹出窗口就会一直停留在那里。我已经看了一段时间了，不知道为什么。
有没有人能帮我看看？
编辑:这些是我拥有的代码。
我的html，其中包含select选项和colorSelectBox
<div class="color-side-a">
<p class=
浏览 0提问于2015-09-01得票数 0
我有一个文本区域，当用户单击它外部时，它应该被隐藏，如果用户单击textarea，它仍然是可见的。
问题是，当用户选择文本区域的文本并将鼠标放在文本框之外时，textarea就会被隐藏，并且不能再复制文本了。
我怎么才能解决这个问题？
HTML：
<span>Show textarea</span>
<div>
<textarea>Text in textarea</textarea>
</div>
Jquery：
$("span").on("click", function (
浏览 13提问于2013-05-09得票数 3
回答已采纳
我正在努力实现以下行为：
当单击带有DivA id的链接“选项”时，DivB应该会显示为淡出效果。如果我再次单击链接“选项”，以及单击页面中除DivB之外的其他任何地方，则DivB将再次取消。
这是我的HTML代码：
<a href="..." id="DivA">Option</a>
<div id="DivB">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
&l
浏览 3提问于2013-10-29得票数 2
回答已采纳
我正在尝试编写一个jQuery函数，以便在单击时隐藏/显示div。
我有一个类为my-button的<a>标记。当页面加载时，带有my-div类的div最初是用display: none隐藏的。当用户点击my-button并且my-div被隐藏时，我想显示my-div。当my-div可见时，我希望当用户在页面上的任何地方单击而不是在my-div上时，能够隐藏它。这也包括点击my-button。
<a class="my-button">Click me!</a>
<div class="my-div">Show M
浏览 2提问于2017-05-10得票数 0
9回答
我有一个div，当我点击外部时，我想隐藏它。我的代码是：
<div id="mydiv">The div must be above button</div>
$('#mydiv').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#mydiv').fadeOut(300);
});
但这对我没用..。
更新
完整的代码如下所示。当我点击一个按钮时
浏览 0提问于2012-12-15得票数 13
回答已采纳
6回答
这个问题已经被问了很多次了，但是似乎没有一个答案对我有效。
div的css如下：
#info{
display: none;
position: fixed;
z-index: 500;
height: 50%;
width: 60%;
overflow: auto;
background: rgba(187, 187, 187, .8);
}
我尝试使用以下代码：
$("#info").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(&
浏览 2提问于2012-07-18得票数 20
回答已采纳
我正在尝试建立一个代码，它将退出一个模式，当用户点击外部的模式。问题是，当我点击垂直滚动条时，由于某种原因，它会触发事件。这是我的代码 $(document).mouseup(function(e) {
var popup = $(".ui-dialog");
if (!$('.ui-dialog').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.fadeOut(100)
浏览 23提问于2019-05-29得票数 0
回答已采纳
当用户单击弹出DIV外部的游标时，我试图关闭弹出DIV。我使用这个JQuery来做到这一点：
$(document).mouseup(function (e) {
var container = $(".polnamen");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... no
浏览 8提问于2014-05-06得票数 1
回答已采纳
(对不起我的英语)
我收到了一个弹出窗口(就像facebook上的通知)。我希望它隐藏后，点击其余的网页。
按部就班地工作。
你能帮帮我吗?
代码：
<div id="login">
...
</div>
CSS：
#login {
background-color:@windows;
position:absolute;
width:413px;
height:190px;
z-index:110;
left:-189px;
top:43px;
overflow:visible;
line-height:normal;
display:none;
}
浏览 7提问于2013-07-24得票数 1
回答已采纳
1回答
单击事件显示/隐藏html元素
、、、、
我使用一个强制布局来显示一个网络，在其中两个节点之间可以有多个链接，如下面的示例：
当我单击两个节点之间的链接(因此在path元素上)时，我想显示相关的信息。
就像这样：
问题是，当我单击页面上的任何位置时，我都想隐藏该div，除非它位于另一条路径上，或者div本身，而且我不知道如何使用D3.js实现这一点。
将click事件绑定到每个路径的代码：
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([
浏览 2提问于2014-05-19得票数 3
回答已采纳
7回答
似乎mouseup事件只有在不与mousemove一起使用时才会被触发。换句话说，按下鼠标左键并松开，鼠标向上移动就会被触发。但是，如果您在图像上拖动鼠标，然后松开鼠标，则不会触发鼠标向上移动。下面是一个显示此行为的示例：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="Out">
<img id="Img" src="http://sstati
浏览 6提问于2009-12-16得票数 18
回答已采纳
2回答
当我点击菜单外面时，我想隐藏我的菜单。我尝试过很多事情，但我肯定做错了什么，而且我在Javascript方面的知识太少，无法处理这个问题。
这是Html
<header id="header">
<div id="showLeftPush">
<div class="toggle">
<div class="one"></div>
<div
浏览 5提问于2015-04-27得票数 0
回答已采纳
我通过创建一个复选框来创建一个水滴列表。如果复选框被选中，则会出现和消失droplist ...我想做一个javascript代码，当用户在外面的空白区域中单击时，取消选中该复选框。
我已经尝试过这个javascript：
<script language="javascript">
document.getElementById("drop1").checked = true;
document.getElementById("drop1").checked = false;
</script>
但它不起
浏览 1提问于2014-02-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
