我正在使用此代码:
$('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内部有链接,当它们点击时它们不再有效.
所以我有一个下拉菜单,根据业务需求单击显示.鼠标离开后,菜单会再次隐藏.
但是现在我被要求让它保持到位,直到用户点击文档的任何位置.如何实现这一目标？
这是我现在拥有的简化版本:
$(document).ready(function() {
$("ul.opMenu li").click(function(){
$('#MainOptSubMenu',this).css('visibility', 'visible');
});
$("ul.opMenu li").mouseleave(function(){
$('#MainOptSubMenu',this).css('visibility', 'hidden');
});
});
<ul class="opMenu">
<li id="footwo" class="">
<span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>
<ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">
<li>some</li>
<li>nav</li>
<li>links</li>
</ul>
</li>
</ul>
我尝试过这样的$('document[id!=MainOptSubMenu]').click(function()事情,认为它会触发菜单上的任何东西,但它没有用.
假设有一些元素漂浮在周围,当我点击ANYTHING(divs,body,等等......)但是指定的那个(例如div#special)时,我正试图做一些.
我想知道是否有更好的方法来实现这一点,除了我能想到的以下方法......
$(document).bind('click', function(e) {
get mouse position x, y
get the element (div#special in this case) position x, y
get the element width and height
determine if the mouse is inside the element
if(inside)
do nothing
else
do something
});
可能重复:
如何检测元素外部的单击？
div如果用户点击除元素之外的任何地方,我正试图实现隐藏.toggle()如果用户点击按钮,我会得到以下代码.如果Details元素可见,我希望按钮单击保持加号,对屏幕的其他部分做出反应.
$('.nav-toggle').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Show Details');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Hide Details');
}
});
});
我想检测div区域内外的点击.棘手的部分是div将包含其他元素,如果单击div中的一个元素,则应将其视为内部单击,如果单击div外部的元素,则应将其视为外部单击.
我一直在研究很多,但我能找到的只是jquery中的例子,我需要纯粹的javascript.
任何建议将不胜感激.
什么是jQuery喜欢和/或最佳实践方式来获取jQuery(或一般的浏览器javascript)中的事件的原始目标.
我一直在用这样的东西
$('body').bind('click', function(e){
//depending on the browser, either srcElement or
//originalTarget will be populated with the first
//element that intercepted the click before it bubbled up
var originalElement = e.srcElement;
if(!originalElement){originalElement=e.originalTarget;}
});
哪个有效,但我对两线功能嗅探并不满意.有没有更好的办法？
我正在尝试将其设置为当您单击按钮时显示我的下拉菜单,并且当您单击除下拉菜单之外的任何位置时隐藏该隐藏菜单.
我有一些代码正常工作,当你单击菜单时没有关闭,但是当你关闭菜单时单击文档,它会显示菜单,所以无论你在哪里点击它都会不断切换.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
我想通过单击其中的关闭链接或通过单击该div之外的任何位置来隐藏div.
我正在尝试关注代码,它通过正确单击关闭链接打开并关闭div,但如果我有问题通过单击div之外的任何位置关闭它.
$(".link").click(function() {
$(".popup").fadeIn(300);
}
);
$('.close').click(function() {
$(".popup").fadeOut(300);
}
);
$('body').click(function() {
if (!$(this.target).is('.popup')) {
$(".popup").hide();
}
}
);<div class="box">
<a href="#" class="link">Open</a>
<div class="popup">
Hello world
<a class="close" href="#">Close</a>
</div>
</div>我使用一个非常简单和干净的代码来渲染我的页面中的模态:
<div class="modal">I'm the Modal Window!</div>
.modal {
/* some styles to position the modal at the center of the page */
position: fixed;
top: 50%;
left: 50%;
width: 300px;
line-height: 200px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background-color: #f1c40f;
text-align: center;
/* needed styles for the overlay */
z-index: 10; /* keep on top of other elements on the page */
outline: 9999px solid rgba(0,0,0,0.5);
}
是否有一种干净可靠的方法来检测何时有人点击模态？
我试图用vanilla JS(没有jQuery)编写一个脚本,如果有人点击这个元素之外,它将从页面中删除一个元素.
但是,它div有许多嵌套元素,我设置的方式是,即使单击第一个元素内的元素,它也会消失.
示例标记:
<div id='parent-node'>
This is the Master Parent node
<div id ='not-parent-node'>
Not Parent Node
<button>Button</button>
<div id='grandchild-node'>
Grandbaby Node
</div>
</div>
</div>
所以我想,无论元素嵌套有多深,它都会检查它是否是<div id='parent-node'>元素的后代.因此,如果我点击它,它将不会删除父节点及其所有后代.该div和它的后代应该只点击父母之外时,可以动态删除div.
目前这就是我所拥有的,而且我知道我写的内容存在一些严重的谬误:
function remove(id) {
return (elem = document.getElementById(id)).parentNode.removeChild(elem);
}
document.addEventListener("click", function (e) {
remove('parent-node');
});