首頁 > web前端 > js教程 > 主體

js阻止冒泡和預設事件(預設行為)詳解

高洛峰
發布: 2016-12-09 15:23:50
原創
1303 人瀏覽過

本文實例為大家分享了js阻止冒泡和預設事件方法,供大家參考,具體內容如下

阻止冒泡。冒泡簡單的舉例來說,兒子知道了一個秘密消息,它告訴了爸爸,爸爸知道了又告訴了爺爺,一級級傳遞從而引起事件的混亂,而阻止冒泡就是不讓兒子告訴爸爸,爸爸自然不會告訴爺爺了。下面的domo就是很好的例子。

<!DOCTYPE html> 
<html> 
  
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box { 
        width: 300px; 
        height: 300px; 
        background: red; 
        display: none; 
      } 
    </style> 
    <script type="text/javascript"> 
      window.onload = function() { 
          var btn = document.getElementById(&#39;btn&#39;); 
          var box = document.getElementById(&#39;box&#39;); 
          btn.onclick = function(ev) { 
            var oEvent = ev || event; 
            box.style.display = &#39;block&#39;; 
            //oEvent.cancelBubble = true;//高版本浏览器 
            stopBubble(oEvent); 
            //在低版本的chrome和firefox浏览器中需要兼容性处理 
            //高版本chrome和firefox浏览器直接使用上面这行代码即可 
          } 
          document.onclick = function() { 
            box.style.display = &#39;none&#39;; 
          } 
  
        } 
        //阻止冒泡事件的兼容性处理 
      function stopBubble(e) { 
        if(e && e.stopPropagation) { //非IE 
          e.stopPropagation(); 
        } else { //IE 
          window.event.cancelBubble = true; 
        } 
      } 
    </script> 
  </head> 
  
  <body> 
    <input type="button" id="btn" value="语言" /> 
    <div id="box"></div> 
  </body> 
  
</html>
登入後複製

我所實現的效果是:點擊按鈕btn讓box顯示,而點擊其他地方則讓box消失。
如果我不阻止冒泡的話,那麼首先btn會觸發點擊時間,讓盒子顯示,但是由於box是包含在document中的,所以會向上冒泡又觸發document的點擊事件,盒子又消失。這個事件的執行順序可以在不同的點擊事件中使用alert來驗證。關於cancelBubble的相容性處理在高版本的chrome和firefox中已經不需要相容處理了,直接使用oEvent.cancelBubble = true 即可。下面的阻止瀏覽器事件的兼容性處理在高版本瀏覽器中同樣不需要。

預設事件。即瀏覽器本身俱備的功能。

function preventDefa(e){
  if(window.event){
    //IE中阻止函数器默认动作的方式 
    window.event.returnValue = false; 
  }
  else{
    //阻止默认浏览器动作(W3C) 
    e.preventDefault();
  } 
}
登入後複製

這種是相容性寫法,但是如果你只需要支援高版本瀏覽器的話,那麼如上文一樣,一句話即可。

btn.onclick = function (){
  return false;
}
登入後複製

   


相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板