首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在div外部单击和隐藏,以及当我将其拖动到div外部时保持隐藏(mouseup,mousedown...)Jquery

在div外部单击和隐藏的需求可以通过以下步骤实现:

  1. 首先,给需要隐藏的div添加一个唯一的id属性,例如id="myDiv"。
  2. 使用jQuery库,可以通过以下代码来实现在div外部单击隐藏的效果:
代码语言:txt
复制
$(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。

  1. 如果需要在将div拖动到div外部时保持隐藏,可以在mousedown事件中添加一个标记,表示鼠标是否按下。然后在mouseup事件中判断该标记,如果为true,则隐藏myDiv。
代码语言:txt
复制
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笔记

JQuery语法 (selector).action() 美元符号定义 jQuery 选择符(selector)“查询”“查找” HTML 元素 jQuery 的 action() 执行对元素的操作...示例 (this).hide() - 隐藏当前元素("p").hide() - 隐藏所有段落 (".test").hide() - 隐藏所有 class="test" 的所有元素 JQuery选择器...() 当鼠标指针离开元素,会发生 mouseleave 事件 mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键,会发生 mousedown 事件 mouseup() 当在元素上松开鼠标按钮...,会发生 mouseup 事件 hover() 方法用于模拟光标悬停事件 focus() 当元素获得焦点,发生 focus 事件 blur() 当元素失去焦点,发生 blur 事件 JQuery 效果...可选的 callback 参数是隐藏或显示完成后所执行的函数名称 toggle(speed,callback) 切换 hide() show() 方法 淡入淡出 fadeIn(speed

6.1K20

jQuery Mobile的学习时间botton按钮的事件学习

生命的绝唱来机只争朝夕,如诗的年华更需惜时金。不要让今天的懈怠成为一生的痛。 每天都在进步。最近在学习jquery mobile开发,使用的button,绑定事件,大家一起学习,一起分享!...://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> <div data-role="...pageremove 在窗口视图从 DOM 中移除外部页面之前触发。 pageshow 在过渡动画完成后,在"到达"页面触发。 scrollstart 当用户开始滚动页面触发。...swiperight 当用户从右划过元素超过 30px 触发。 tap 当用户敲击某元素触发。 taphold 当元素敲击某元素并保持一秒触发。...throttledresize 启用可标记 #hash 历史记录 updatelayout 由动态显示/隐藏内容的 jQuery Mobile 组件触发。

1.6K20

JQ事件事件对象

1 事件 一 .鼠标事件    1.ready()页面载入事件:载入文档节点    2 click()熟悉的单击事件    3 dbclick()双击事件    4 mousedown() /mouseup...()/mouseout()mouseenter()/mouseleave()的区别    首先来了解一下事件冒泡捕获     事件冒泡:内部事件先触发,然后在触发外部事件     事件捕获:外部事件先被触发...,如果鼠标移入所选元素的后代,不会触发(增加阻止事件冒泡功能) <...)keypress区别    keydown()按下任意键都会触发,但keypress()事件只在按下键盘中任意字符键(A-Z)触发,功能键不会触发(shift ctrl 等)     4 event.which...触发事件     6 select():当选中单行文本text或者多行文本areatext,触发事件    7 submit()  :表单提交事件  //focus()focusin() 的区别

4.1K20

深入浅出 RxJS 之 函数响应式编程

">ms <script src="https://code.<em>jquery</em>.com/<em>jquery</em>-...上面 mouseDown <em>和</em> <em>mouseUp</em> 都是数据流,分别代表按钮上的 mousedown 事件<em>和</em> <em>mouseup</em> 事件集合,不光包含已经发生的事件,还包含没有发生的鼠标事件。...“流”可以通过多种方法创造出来,mouseDown <em>和</em> <em>mouseUp</em> 通过 fromEvent 函数从网页的 DOM 元素中获得,holdTime 这个流则是通过 mouseDown <em>和</em> <em>mouseUp</em>...“变”,赋值<em>时</em>是什么值,就会一直<em>保持</em>这些值,代码是一个一个函数,每个函数只是对输入的参数做了响应,然后返回结果。...面向对象的思想是把数据封装在类的实例对象中,把数据藏起来,让<em>外部</em>不能直接操作这些对象,只能通过类提供的实例方法来读取<em>和</em>修改这些数据,这样就限制了对数据的访问方式。

1.1K10

jQuery Cheat—Sheet(jQuery学习笔记)

; }); 鼠标移入并点击事件 当鼠标指针移动到元素上方,并按下鼠标按键,会发生 mousedown 事件。 在下面实例中,鼠标移入元素,并点击,弹出“Bye!...; }); 鼠标释放事件 当在元素上松开鼠标按钮,会发生 mouseup 事件。 在下面实例中,鼠标点击元素,释放,弹出“Mouse up over p1!”...当鼠标移动到元素上,会触发指定的第一个函数(mouseenter,); 当鼠标移出这个元素,会触发指定的第二个函数(mouseleave)。...下面实例中,元素获得焦点,将其CSS样式做出修改。...---- #jQuery 效果 隐藏显示 jQuery hide() show() jQuery hide() show() 通过 jQuery,您可以使用 hide() show() 方法来隐藏显示

16.2K30

jquery 使用方法

5 $('div').eq(5); //选择第6个div元素 有一些时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法: 1 $('div').next(...假定我们选中了一个div元素,需要把它移动到p元素后面。...使用这种模式的操作方法,一共有四对 1 .insertAfter().after():在现存元素的外部,从后面插入元素 2 .insertBefore().before():在现存元素的外部,从前面插入元素...删除元素使用.remove().detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档使用。 清空元素内容(但是不删除该元素)使用.empty()。...: 1 event.pageX 事件发生,鼠标距离网页左上角的水平距离 3 event.pageY 事件发生,鼠标距离网页左上角的垂直距离 5 event.type 事件的类型(比如click

1.6K10

JQuery最全常用方法指南

这是一个Ajax事件 当所有AJAX请求都停止隐藏loading信息。...$(”div: hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域 $(”div: visible”) 匹配所有可见的元素 属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性的元素...2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象jquery对象是有区别的,调用方法要注意操作的是dom对象还是 jquery对象。...:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。...当鼠标移动到一个匹配的元素上面,会触发指定的第一个函数。当鼠标移出这个元素,会触发指定的第二个函数。 //当鼠标放在表格的某行上将class置为over,离开置为out。

10.9K31

jQuery设计思想

/选择第6个div元素 有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:   $('div').next('p'); //选择div元素后面的第一个...假定我们选中了一个div元素,需要把它移动到p元素后面。...使用这种模式的操作方法,一共有四对: .insertAfter().after():在现存元素的外部,从后面插入元素 .insertBefore().before():在现存元素的外部,从前面插入元素...删除元素使用.remove().detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档使用。 清空元素内容(但是不删除该元素)使用.empty()。...: event.pageX 事件发生,鼠标距离网页左上角的水平距离 event.pageY 事件发生,鼠标距离网页左上角的垂直距离 event.type 事件的类型(比如click)

2.2K60

何在 React 中点击显示或隐藏另一个组件?

然后,我们在组件的返回值中渲染一个按钮一个条件渲染的 div 元素。当用户单击按钮,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...显示/隐藏菜单我们可以使用事件处理函数来显示或隐藏菜单。当用户单击菜单按钮,菜单应该出现,然后当用户单击菜单外部,菜单应该消失。...否则,菜单保持可见。我们还使用了 useEffect 钩子来添加删除事件监听器。useEffect 钩子在组件挂载注册事件监听器,并在卸载删除它们,以避免内存泄漏。...显示/隐藏模态框我们可以使用事件处理函数来触发模态对话框的显示或隐藏。当用户单击打开模态框的按钮,模态框应该出现;当用户单击关闭按钮或模态框之外,模态框应该消失。...如果用户单击的元素不在模态对话框中,则将可见性设置为 false,模态对话框将被隐藏。否则,模态对话框保持可见。我们还添加了一个关闭按钮,用于关闭模态对话框。

4.5K10

学习jQuery这一篇就够了

jQuery 核心对象:即执行 jQuery 核心函数返回的对象,jQuery 对象内部包含的是 dom 元素对象的伪数组 (可能只有一个元素),jQuery 对象拥有很多有用的属性方法,让程序员能方便的操作...注意:如果存在(不存在)就删除(添加)一个样式类 需求描述:当单击按钮的时候,隐藏 div,再次单击按钮的时候,显示 div .hide { width: 100px; height...).scrollLeft(); 设置页面滚动条滚动到指定位置 (兼容 chrome IE) $('body,html').scrollLeft(60); 需求描述:设置页面的宽度为 2000px,设置滚动条的...).scrollTop(); 设置页面滚动条滚动到指定位置 (兼容 chrome IE) $('body,html').scrollTop(60); 需求描述:设置页面的高度为 2000px,设置滚动条的...需求描述:为 ul 下的所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li ,所对应的 li 背景变为红色 1111 2222</

81750

前端开发JS——jQuery常用方法

1、jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作,这两个方法用法及其类似,所以这只介绍click事件,只有单击释放后才生效...handlerOut(eventObject):当鼠标指针离开元素触发执行的事件函数 7、jQuery鼠标事件之focusin与focusout事件 focusin 方法用于监听用户元素聚焦操作(...(onbind是一样的, 推荐使用on) 基本用法:.on(event, [selector] , [data]) :$ele.on("click", function(){}) 上述提到的事件最大的不同点是...自定义事件对象,是jQuery模拟原生实现的 自定义事件可以传递参数 ---- jQuery基础(四)---动画篇 1、jQuery中元素的隐藏显示之hideshow方法 (改变样式display...以及fadeToggle的比较 操作元素的显示与隐藏可以有 改变样式display:none/block/inline/inline-block ======>toggle 横向动作 (显示从左到右

4.9K20

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素元素的click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素,只 触发元素的click...事件,而不触发 元素上的 click事件.当单击 元素,只触发 元素上的click事件, 而不触发元素上的click事件....事件对象: 由于IE-DOM标准DOM实现事件对象的方法各不相同,导致在不同 浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩 展封装,从而使得在任何浏览器中能很好的轻松的访问获取事件对象以及事...; event.stopPropagation();//停止冒泡事件 }) 当单击span元素,只会触发span元素上的click事件,而不会触发 div元素body元素的click事件....该方法的作用是获取到光标相对于页面的x坐标y坐标.如果没有使用jquery,那么IE浏览器中 是使用event.pageX()event.pageY()方法.如果页面上有滚动条,则还要加上滚动条的宽度

8.2K20

Web前端学习 第4章 jQuery 2 jQuery常用方法

二、鼠标单击事件 我们先来将最常用的鼠标单击事件click,jQuery的基本语法如下所示: 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...}) 我们先通过$(“selector”)选择器获取元素,然后通过click为元素定义事件,这样当我们用鼠标单击这个元素的时候,就会执行花括号中的代码。...三、其他鼠标事件 上一节我们说了鼠标单击事件,其实鼠标事件还有很多,这节我们讲解鼠标移入,移出移动事件。 鼠标移入移出改变样式 鼠标的移入一出事件分别是mouseentermouseleave。...鼠标移动获取坐标 鼠标在元素上移动的时候也会触发事件,下面我们来实现一个功能,当鼠标移动到一个div的时候,获取鼠标在网页页面上的坐标,代码如下所示: 1 <!...然后通过console.log()方法在控制台输出x坐标y坐标。 课后练习 滑动显示隐藏的右边栏,点击按钮弹出,电气其他位置隐藏。 让图片跟随鼠标移动。 返回顶部

1.9K30

【融职培训】Web前端学习 第4章 jQuery 2 jQuery常用方法

二、鼠标单击事件 我们先来将最常用的鼠标单击事件click,jQuery的基本语法如下所示: 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...}) 我们先通过$(“selector”)选择器获取元素,然后通过click为元素定义事件,这样当我们用鼠标单击这个元素的时候,就会执行花括号中的代码。...三、其他鼠标事件 上一节我们说了鼠标单击事件,其实鼠标事件还有很多,这节我们讲解鼠标移入,移出移动事件。 鼠标移入移出改变样式 鼠标的移入一出事件分别是mouseentermouseleave。...鼠标移动获取坐标 鼠标在元素上移动的时候也会触发事件,下面我们来实现一个功能,当鼠标移动到一个div的时候,获取鼠标在网页页面上的坐标,代码如下所示: 1 <!...然后通过console.log()方法在控制台输出x坐标y坐标。 课后练习 滑动显示隐藏的右边栏,点击按钮弹出,电气其他位置隐藏。 让图片跟随鼠标移动。 返回顶部

1.6K10

jQuery 入门指南教程

).hide() - 隐藏所有 id="test" 的元素 通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jQuery...选择所有的div元素,除了前三个 $('div:animated') // 选择当前处于动画状态的div元素 dom对象jQuery对象区别 只有jQuery对象才能使用jQuery定义的方法。...注意dom对象jQuery对象是有区别的,调用方法要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。...:$(document.getElementById(”msg”))则为jQuery对象,可以使用jQuery的方法。...div 元素 $('div').eq(5); // 选择第六个 div 元素 有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法: $('div').next

1.2K11

JavaScript进阶内容——jQuery

以及使用方法,本篇不会完全讲解jQuery的全部语法 如果希望完全掌握,可以参考网站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery...//页面DOM加载完成后进行 }) 上述两种方法可以使jQuery的书写位置任意存放 等待DOM结构渲染完毕后即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们完成了封装 相当于原生JS...$是jQuery的顶级对象,你可以从中调用任何函数,类似于window jQuery对象DOM对象以及互相转换 我们需要注意...获得鼠标焦点触发 blur 失去鼠标焦点触发 mousemove 鼠标移动触发 mouseup 鼠标弹起触发 mousedown 鼠标按下触发 键盘事件 说明 keyup 某个键盘按键被松开触发...keydown 某个键盘按键被按下触发 keypress 某个键盘按键被按下触发(不能识别功能键,ctrl,shift,左右箭头) 代码展示: <!

5.4K10

JQuery基础

使用大公司CDN好处: 许多用户在访问其它站点,已经从百度、新浪、谷歌微软加载过jQuery。当用户访问我的站点,会从缓存中加载jQuery,这样可以有效减少加载时间!...当鼠标指针移动到元素上,会触发第一个函数(mouseenter);当鼠标指针移出这个元素,会触发第二个函数(mouseleave)。...ps:params支持多个属性,中间用","隔开,同时属性值(不加引号)用驼峰标记法::margin-left改为marginLeft;属性值加引号按照css写法。 例如: <!...: $('p').css('font-size':'10px').show().hide(); 第六部分:jQuery HTML 1.获取内容属性 --  获取内容: text():设置或获取所选元素的文本内容...:$('span').parentsUntil('div'):代表span与div之间所有的祖先元素。

4.6K51
领券