当用户在 DIV 外部单击时,使用 jQuery 隐藏 DIV
我正在使用这段代码:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
和这个 HTML:
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
问题是我在 div
内有链接,并且当单击它们时它们不再起作用。
I am using this code:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
And this HTML:
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
The problem is that I have links inside the div
and when they no longer work when clicked.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(30)
遇到了同样的问题,想出了这个简单的解决方案。它甚至递归地工作:
Had the same problem, came up with this easy solution. It's even working recursive:
你最好选择这样的东西:
You'd better go with something like this:
此代码检测页面上的任何单击事件,然后当且仅当单击的元素既不是
#CONTAINER
元素也不是其后代元素之一时,隐藏#CONTAINER
元素。This code detects any click event on the page and then hides the
#CONTAINER
element if and only if the element clicked was neither the#CONTAINER
element nor one of its descendants.您可能想要检查为正文触发的单击事件的目标,而不是依赖 stopPropagation。
类似于:
此外,body 元素可能不包括浏览器中显示的整个视觉空间。如果您发现点击未注册,则可能需要为 HTML 元素添加点击处理程序。
You might want to check the target of the click event that fires for the body instead of relying on stopPropagation.
Something like:
Also, the body element may not include the entire visual space shown in the browser. If you notice that your clicks are not registering, you may need to add the click handler for the HTML element instead.
实时演示
检查点击区域不在目标元素或其子元素中
更新:
jQuery 停止传播是最好的解决方案
Live DEMO
Live DEMO
Check click area is not in the targeted element or in it's child
UPDATE:
jQuery stop propagation is the best solution
Live DEMO
没有 jQuery 的解决方案最流行的答案:
MDN:https://developer.mozilla.org/en/docs/Web/API/Node/contains
A solution without jQuery for the most popular answer:
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
将解决方案更新为:
var mouseOverActiveElement = false;
Updated the solution to:
var mouseOverActiveElement = false;
具有 ESC 功能的实时演示
适用于桌面端和移动端
如果在某些情况下,您需要确保单击文档时您的元素确实可见:
if($pop.is(':visible') && (notH||e .which==27)) $pop.hide();
Live demo with ESC functionality
Works on both Desktop and Mobile
If for some case you need to be sure that your element is really visible when you do clicks on the document:
if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
这样的事情行不通吗?
或者
Wouldn't something like this work?
or
您可以将
tabindex
设置为父并监听
focusout<,而不是监听 DOM 上的每一次点击来隐藏一个特定元素。 /代码> 事件。
设置
tabindex
将确保blur
事件在上触发(通常不会)。
所以你的 HTML 看起来像:
和你的 JS:
Instead of listening to every single click on the DOM to hide one specific element, you could set
tabindex
to the parent<div>
and listen to thefocusout
events.Setting
tabindex
will make sure that theblur
event is fired on the<div>
(normally it wouldn't).So your HTML would look like:
And your JS:
这么多答案,一定是有通行权才添加一个......
我没有看到当前的(jQuery 3.1.1)答案 - 所以:
So many answers, must be a right of passage to have added one...
I didn't see a current (jQuery 3.1.1) answers - so:
甚至更圆滑:
Even sleaker:
对于 IPAD 和 IPHONE 等触摸设备,我们可以使用以下代码
And for Touch devices like IPAD and IPHONE we can use following code
(只是添加到 prc322 的答案中。)
在我的例子中,我使用此代码来隐藏用户单击适当选项卡时出现的导航菜单。我发现添加一个额外条件很有用,即容器外部的点击目标不是链接。
这是因为我网站上的某些链接向页面添加了新内容。如果在导航菜单消失的同时添加此新内容,则可能会让用户迷失方向。
(Just adding on to prc322's answer.)
In my case I'm using this code to hide a navigation menu that appears when the user clicks an appropriate tab. I found it was useful to add an extra condition, that the target of the click outside the container is not a link.
This is because some of the links on my site add new content to the page. If this new content is added at the same time that the navigation menu disappears it might be disorientating for the user.
这是我在另一个线程上找到的 jsfiddle,也可以使用 esc 键: http://jsfiddle.net/S5ftb/404< /a>
Here's a jsfiddle I found on another thread, works with esc key also: http://jsfiddle.net/S5ftb/404
基于 prc322 的精彩答案构建。
这增加了一些东西...
我希望这对某人有帮助!
Built off of prc322's awesome answer.
This adds a couple things...
I hope this helps someone!
如果您在使用 ios 时遇到问题,则 mouseup 在苹果设备上无法工作。
jquery 中的 mousedown /mouseup 适用于 ipad 吗?
我用这个:
if you have trouble with ios, mouseup is not working on apple device.
does mousedown /mouseup in jquery work for the ipad?
i use this:
p
是元素名称。其中也可以传递 id 或类或元素名称。p
is the element name. Where one can pass the id or class or element name also.复制自 https://sdtuts.com/click-on-not-specified-element /
现场演示 http://demos.sdtuts.com/click-on -指定元素
Copied from https://sdtuts.com/click-on-not-specified-element/
Live demo http://demos.sdtuts.com/click-on-specified-element
如果单击 .form_wrapper,则返回 false:
Return false if you click on .form_wrapper:
将单击事件附加到表单包装器外部的顶级元素,例如:
这也适用于触摸设备,只需确保您的选择器列表中不包含 .form_wrapper 的父级即可。
Attach a click event to top level elements outside the form wrapper, for example:
This will also work on touch devices, just make sure you don't include a parent of .form_wrapper in your list of selectors.
FIDDLE
FIDDLE
为我在所有设备上工作(2023);)
Working on all device for me ( 2023 ) ;)
您可以做的是将单击事件绑定到文档,如果单击下拉列表外部的内容,该文档将隐藏下拉列表,但如果单击下拉列表内部的内容,则不会隐藏它,因此您的“显示”事件(或幻灯片或其他内容)显示下拉)
然后隐藏时,解除绑定点击事件
What you can do is bind a click event to the document that will hide the dropdown if something outside the dropdown is clicked, but won't hide it if something inside the dropdown is clicked, so your "show" event (or slidedown or whatever shows the dropdown)
Then when hiding it, unbind the click event
我是这样做的:
i did it like this:
通过使用此代码,您可以隐藏任意数量的项目
By using this code you can hide as many items as you want