DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js利用事件的阻止冒泡實現點擊空白模態框的隱藏
js利用事件的阻止冒泡實現點擊空白模態框的隱藏
編輯:JavaScript綜合知識     

 點擊彈出某個框框,但是,有時候不想操作,就想點擊某個空白處,隱藏該框框,關於這一點,下面有個具體的實現

很多時候,我們做前端的時候都會有這樣的小功能,點擊彈出某個框框,但是,有時候不想操作,就想點擊某個空白處,隱藏該框框。假設如下場景,一個小按鈕,點擊可以彈出一個模態框。    就這麼簡單,但是我們想要點擊空白部分的時候隱藏模態框,加入按鈕id:btn,模態框id:model    也許我們最簡單的思路就是直接在document上監聽一個事件,偽代碼如下:    按鈕點擊彈出事件監聽:   代碼如下: $("#btn").bind("click",function(e){  if(e.stopPropagation){//需要阻止冒泡  e.stopPropagation();  }else{  e.cancelBubble = true;  }  })  代碼如下: $(document).bind("click",function(e){  if(點擊事件不在model上){  隱藏模態框;  }  })    乍一看,這是沒有問題的,但是,其實有很多問題,首先,我們得注意阻止冒泡,否則,點擊按鈕,實際是觸發了上面兩個事件,modal是彈不出來的,其實是彈出來了,立馬又隱藏了,而且,當我們在模態框上還有許多小控件的時候,我們對於模態框中的點擊就很難進行判斷。    這裡,我認為有一種最經典的方法,很簡單,但是很巧妙,    首先,對於模態框監聽一個事件如下:  代碼如下: $("#modal").bind("click", function(event) {  if (event && event.stopPropagation) {  event.stopPropagation();  } else {  event.cancelBubble = true;  }    });    只是簡單阻止模態框中的點擊事件冒泡,    然後:  代碼如下: $(document).one("click", function(e){  var $target = $(e.currentTarget);  if ($target.attr("id") != "modal") {  $("#modal").css("display", "none");  }  });    搞定,so easy 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved