Fra*_*nek 117 jquery events event-bubbling
我想知道这是否是在页面上的任何位置单击时隐藏可见元素的正确方法.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
当元素边界内发生click事件时,元素(div,span等)不应消失.
Jer*_* B. 199
如果我理解你想要隐藏一个div当你点击除了div之外的任何地方,如果你点击div而不是它,那么它不应该关闭.你可以这样做:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
这会将点击绑定到整个页面,但如果您单击有问题的div,它将取消单击事件.
TSt*_*per 24
试试这个
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
我使用类名而不是ID,因为在asp.net中你必须担心额外的东西.net附加到id
编辑 - 既然你添加了另一篇文章,它会像这样工作:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
小智 22
从jQuery 1.7开始,有一种处理事件的新方法.我以为我会在这里回答只是为了演示如何以"新"的方式来做这件事.如果还没有,我建议您阅读"on"方法的jQuery文档.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
在这里,我们滥用jQuery的选择器和冒泡事件.请注意,我确保事后清理事件处理程序.您可以使用$('.container').one(请参阅:docs)自动执行此行为,但因为我们需要在处理程序中执行不适用的条件.
小智 13
以下代码示例似乎最适合我.虽然你可以使用'return false'来停止对div或其中任何一个孩子的所有事件处理.如果要对弹出div(例如弹出式登录表单)进行控制,则需要使用event.stopPropogation().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
小智 6
谢谢,托马斯.我是JS的新手,我一直在寻找解决问题的方法.你的帮助.
我使用jquery制作一个向下滑动的登录框.为了获得最佳用户体验,我希望当用户点击某个地方而不是框时,该框会消失.使用大约四个小时解决这个问题我有点尴尬.但是,嘿,我是JS的新手.
也许我的代码可以帮助某人:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
我做了以下.分享的想法让其他人也受益.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
如果我可以帮助此人,请告诉我.
小智 5
你还可以做的是:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
如果您的目标不是div,则通过检查其长度等于零来隐藏div.
| 归档时间： |
|
| 查看次数： |
206756 次 |
| 最近记录： |