如果用户在div外部单击时如何隐藏div？

我有一个按钮，点击后，改变div的可见度，例如：如果用户在div外部单击时如何隐藏div？

<button type="button" id="editbutton" onclick="plus()" alt="Edit"></button> 

function plus() { 
var f = document.getElementById('edit'); 
if (f.style.visibility == 'hidden') { 
    f.style.visibility = 'visible'; 
    } 
else 
    f.style.visibility = 'hidden'; 
}

这工作得很好。但是现在我想添加这个功能，这样如果用户点击div外的任何地方，div就会回到隐藏状态。

最初我尝试了我自己的方法，但没有成功，因为无论何时单击按钮使div可见，它都会被新代码再次隐藏。我查看了其他人发布的一些jQuery示例，但是我没有尝试解决这个问题。任何帮助，我会非常感激。

编辑：澄清，问题是，因为div最初由用户单击按钮可见，每当我单击按钮时，该div是可见的，但立即再次隐藏，因为计数为点击页面的主体。

来源

2012-10-13 fvgs

你应该发布你的尝试。 – Musa

[此帖]（http://stackoverflow.com/questions/2060354/detect-background-click-in-jquery）应该会有所帮助。 –

我想知道你想解决什么问题？ div包含什么？另外，你已经标记了'Jquery'这个帖子，你的整个代码片段可以切换为'$（“＃buttonToClick”）。click（function（）{$（“。edit”）。toggle（）;}）; ' – Jan

当用户在您的div中点击时，您可以在点击事件处理程序中对该事件调用'e.stopPropagation（）' - 这将停止从'冒泡'DOM的事件。

然后，如果您将事件处理程序附加到侦听点击的BODY元素，则可以使用该事件处理程序来隐藏DIV;知道点击DIV本身不会将事件吹到BODY处理程序。

以这种方式，除非处理程序也调用stopPropagation（），否则任何点击另一个元素都会被处理程序捕获。因此，如果还有其他情况，您不希望div隐藏，则可以根据需要调用stopPropagation（）来停止它。

例如为：

$("#edit-button").click(function(e) { 
    $("#edit").toggle(); 
    e.stopPropagation(); 
}); 

$('#edit').click(function(e) { 
    e.stopPropagation(); 
}); 

$("body").click(function(e) { 
    $("#edit").hide(); 
});

来源

2012-10-13 23:49:11 sync

请举例吗？ – fvgs

添加了一个示例。不过你需要修改'edit-button'的ID。未经测试，但应该工作;） – sync

我试过这个，但是div现在甚至不会出现。我根据需要更改了var名称，并且在其余代码中没有可以使用的因素。我对jQuery并不特别强大，所以也许我错过了一些重要/明显的东西？ – fvgs

在body元素上设置点击处理程序。如果可以，请检查event.target以查看它是否与div相符，如果确实如此：不要执行任何操作，否则：隐藏它。

document.body.onclick = function(event) { 
    if (event.target === f) { 
     // user clicked on the div, do nothing 
    } else { 
     f.style.visibility = "hidden"; 
    } 
};

如果你有编辑div（和.target不匹配）中的元素，这变得有点复杂，但我相信你能拿出一个解决方案:)（这是可以做到）。

来源

2012-10-13 23:49:03 Halcyon

我有一个窗体div与输入元素和提交按钮。如果用户点击其中一个文本输入，这是否仍然有效？也就是说，div会保持可见吗？ – fvgs

-1

你看起来就像你知道你在做什么，所以我会尽量简短。

在jquery中写一个.click函数。

你给你的按钮的ID（或者是在div）

$('#buttonidordiv').click(function(){ 
$('#divtoshow').show() // put in a number to create a fade in seconds. 
//your stuff here 
}

，如果有人点击以外的任何地方...我想你应该可以使用窗口。否则你可以使用另一个div（比如你的包装）。

所以

$('window').click(function(){ 
$('#samediv').hide() //same as above 
//your stuff here 

}

一定要明白，我与)};吸，所以你可能要添加这些地方之一;）

好运！

来源

2012-10-13 23:50:44 NoobishPro

如果用户在div外部单击时如何隐藏div？

回答

相关问题