方法:1、利用stopPropagation()方法禁止,但不會阻止預設行為,語法「event.stopPropagation()」;2、利用return方法禁止,同時阻止預設行為,語法「function() {return false}」。
本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。
原生JS 中,對事件物件(event) 有2 種主要的方法;
stopPropagation 和preventDefault
第一個是禁止冒泡,第二個是阻止預設行為
註:這是原生JS 的方法,並非jQuery 的方法,event 形參可以為任何變量,例如用e 這個也可以的;
ele.onmouseover=function(event){ event=event||window.event; if(event.stopPropagation){ event.stopPropagation();//标准留言器中禁止冒泡; // preventDefault中文意思是阻止默认行为; }else{ e.cancelBubble=true;//IE浏览器禁止冒泡;IE678 } }
1、事件的禁止冒泡
ele.onmouseover=function(event){ event=event||window.event; if(event.stopPropagation){ event.stopPropagation();//标准留言器中禁止冒泡; // preventDefault中文意思是阻止默认行为; }else{ e.cancelBubble=true;//IE浏览器禁止冒泡;IE678 } }
2、return 的阻止
ele.onmouseover=function(){ return false }
區別。
return false 不僅阻止了事件往上冒泡,也阻止了事件本身。
event.stopPropagation() 則只阻止事件往上冒泡,不阻止事件本身。
整理:
1.event.stopPropagation();
事件處理過程中,阻止了事件冒泡,但不會阻擋默認行為(可執行超連結的跳轉)
2.return false;
事件處理過程中,阻止了事件冒泡,也阻止了預設行為(不執行超連結的跳躍)
還有一種有冒泡有關的:
event.preventDefault();
它的作用是:事件處理過程中,不阻擊事件冒泡,但阻擊預設行為(它只執行所有彈框,卻沒有執行超連結跳轉)
【相關推薦:javascript影片教學、web前端】
以上是javascript怎麼禁止事件冒泡的詳細內容。更多資訊請關注PHP中文網其他相關文章!