Ich möchte ein Div ausblenden, wenn Benutzer irgendwo auf der Seite außerhalb dieser div klicken. Wie kann ich das mit rohen Javascript oder jQuery tun?Ereignis auf einen Klick überall auf der Seite außerhalb der spezifischen div
Bringen Sie dem Dokument ein Click-Ereignis das div zu verbergen:
$(document).click(function(e) {
$('#somediv').hide();
});
ein Click-Ereignis auf die div anhängen Klicks auf ihn zu stoppen, um das Dokument von Vermehrungs
$('#somediv').click(function(e) {
e.stopPropagation();
});
Vielen Dank! Das hat genau so funktioniert, wie ich es wollte. – sumek
AFAIK, mit jQuery in der zweiten Event-Handler müssen Sie nur "false zurückgeben;" um die Ausbreitung zu stoppen. http://docs.jquery.com/Events/click (am Ende der Seite) – scunliffe
@scunliffe - Das stimmt, sie machen im Grunde dasselbe. Das Schöne an stopProp ist, dass es nicht die letzte Zeile sein muss, also können Sie es zum Beispiel zur besseren Lesbarkeit immer in die erste Zeile setzen. –
Erste Idee, in raw Javascript (von this post):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#mydiv{
background-color: #999999;
height: 100px;
width: 100px;
}
-->
</style>
<script type="text/javascript">
document.onclick=check;
function check(e)
{
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('mydiv');
if(target!=obj){obj.style.display='none'}
}
</script>
</head>
<body>
<div id="mydiv">my div</div>
</body>
</html>
Getestet mit IE6 und FireFox3.1, es funktioniert wie beworben.
Es ist sicher klingt wie Sie möchten einen modalen Dialog. Dieses jQuery Plugin http://code.google.com/p/simplemodal/ sieht aus wie es Potential hat.
Wenn das div den Fokus hat, können Sie an das Onblur-Ereignis anhängen.
Ich denke, das jQuery focusout() - Event wird Ihr Problem lösen. –