简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

js實現的點擊div區域外隱藏div區域_javascript技巧

WBOY
發布： 2016-05-16 16:42:53
原創
1485 人瀏覽過

先看下JS的事件模型，JS事件模型為向上冒泡，如onclick事件在某一DOM元素被觸發後，事件將跟隨節點向上傳播，直到有click事件綁定在某一父節點上，如果沒有將直至文檔的根。

阻止冒泡：1、stopPropagation()對於非IE瀏覽器。 2.cancelBubble屬性為true，對於IE瀏覽器，

而Jquery已經有相容瀏覽器的方法，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>
登入後複製
相關標籤：
点击div 隐藏div
來源：php.cn
上一篇：原生JS綁定滑輪滾動事件相容於常見瀏覽器_javascript技巧 下一篇：node.js實作逐行讀取檔案內容的程式碼_node.js
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在行動視圖中，當使用者點擊連結時，如何關閉此導覽列？ 當使用者點擊連結瀏覽網站時，導覽列沒有關閉？我曾嘗試向每個連結新增點擊事件偵聽器以關閉導覽欄，但它不起作用！此外，處於活動位置（即X）的hamberberger選單圖示也沒有很好地...
來自於 2024-04-06 19:23:03
0
1
411
狀態更新在 Android 上的 React-Native 中不起作用 我有一些程式碼，其中有成對的圖像，它們都在可滑動的水平圖庫中。現在，當您單擊兩個圖像的上部時，圖像應該關閉切換，所以我所做的是，我將isImage2Active設為狀態，然後只需切...
來自於 2024-04-06 16:54:10
0
1
410
單擊並滾動時隱藏/顯示 div 我想建立一個隱藏的搜尋表單，當我們點擊搜尋圖示時，該表單會出現，而當使用者點擊或捲動時，搜尋表單會隱藏。
來自於 2024-04-06 12:20:46
0
1
386
將物件推送到數組，組合式API 有一個項目。有兩個選擇選項“size”（大，小）和數量（2/4/6）。當選擇每個選項時，需要在標題中顯示所選內容（假設為小和4）。點擊「新增到儲存」按鈕後，它將新增到儲存中，在另一...
來自於 2024-04-05 14:41:47
0
1
1526
React Router 巢狀路由與搜尋參數的使用 在嵌套的React路由中使用搜尋參數時，當我在/app上，點擊導航到/app/user的連結後，導航就不起作用。如果我嘗試不嵌套使用，它是可以工作的。但為什麼在嵌套時它不起作用。 ...
來自於 2024-04-05 13:48:33
0
1
1475
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！