Heim > Artikel > Web-Frontend > Klicken Sie außerhalb des Div-Bereichs, um die von js implementierten Div-Area_Javascript-Fähigkeiten auszublenden

Klicken Sie außerhalb des Div-Bereichs, um die von js implementierten Div-Area_Javascript-Fähigkeiten auszublenden

WBOYOriginal: 2016-05-16 16:42:531486Durchsuche

Werfen wir zunächst einen Blick auf das JS-Ereignismodell. Nachdem beispielsweise ein Onclick-Ereignis für ein bestimmtes DOM-Element ausgelöst wurde, breitet sich das Ereignis nach oben aus, bis ein Klickereignis auftritt ist an einen bestimmten übergeordneten Knoten gebunden, andernfalls wird es bis zum Stammverzeichnis des Dokuments verschoben.

Sprudeln verhindern: 1. stopPropagation() für Nicht-IE-Browser. 2. Das cancelBubble-Attribut ist wahr, für den IE-Browser

Jquery verfügt bereits über eine browserkompatible Methode, event.stopImmediatePropagation();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
}

#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
　　　　　　}
　　</style>
<body>
<input id="btn" type="button" value="显示DIV" />

<div id="myDiv">
This is a div;
</div>

</body>

<script type="text/javascript">
　　　　var myDiv = $("#myDiv");
$(function ()
{
$("#btn").click(function (event) 
{
showDiv();//调用显示DIV方法
$(document).one("click", function () 
{//对document绑定一个影藏Div方法
$(myDiv).hide();
});

event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event) 
{

event.stopPropagation();//阻止事件向上冒泡
});
});
　　　　function showDiv() 
{
$(myDiv).fadeIn();
}
</script>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das native JS-Bindungs-Pullover-Scroll-Ereignis ist mit gängigen Browser-Javascript-Kenntnissen kompatibelNächster Artikel：Das native JS-Bindungs-Pullover-Scroll-Ereignis ist mit gängigen Browser-Javascript-Kenntnissen kompatibel

In Verbindung stehende Artikel

Mehr sehen