Javascript阻止事件冒泡和浏览器默认行为
生活随笔
收集整理的這篇文章主要介紹了
Javascript阻止事件冒泡和浏览器默认行为
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.阻止事件冒泡,使成為捕獲型事件觸發機制.
function stopBubble(e) { //如果提供了事件對象，則這是一個非IE瀏覽器 if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法e.stopPropagation(); else//否則，我們需要使用IE的方式來取消事件冒泡window.event.cancelBubble = true; }2.當按鍵后,不希望按鍵繼續傳遞給如HTML文本框對象時,可以取消返回值.即停止默認事件默認行為.
//阻止瀏覽器的默認行為 function stopDefault( e ) {//阻止默認瀏覽器動作(W3C)if ( e && e.preventDefault )e.preventDefault();//IE中阻止函數器默認動作的方式elsewindow.event.returnValue = false;return false; }那么通過下面的一段代碼我們來看下函數一的效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>效果測試</title> <script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { $('div.c1').click(function(e){alert('單擊了div');}); $('div.c2').click(function(e){alert('單擊了div');stopBubble(e);}); $(document).click(function(e){alert('單擊了document');}); $('#txt1').val('123'); $('#txt1').click(function(e){stopBubble(e);}); $('#txt1').keydown(function(e){stopDefault(e);alert('你按下了鍵值'+e.keyCode); }); })function stopBubble(e) { //如果提供了事件對象，則這是一個非IE瀏覽器if ( e && e.stopPropagation )//因此它支持W3C的stopPropagation()方法e.stopPropagation();else//否則，我們需要使用IE的方式來取消事件冒泡window.event.cancelBubble = true; } //阻止瀏覽器的默認行為 function stopDefault( e ) {//阻止默認瀏覽器動作(W3C)if ( e && e.preventDefault )e.preventDefault();//IE中阻止函數器默認動作的方式elsewindow.event.returnValue = false;return false; } </script> <style type="text/css"> body{ font-size:14px;} } .c1{font-family:"Arial Unicode MS"} .c2{font-family:helvetica,simsun,arial,clean} </style> </head><body><div class="c1">測試的文字,這里是樣式C1,單擊以冒泡的形式觸發事件.</div><hr/><div class="c2">測試的文字,這里是樣式C2,單擊以捕獲的形式觸發事件.</div><hr/><div><input id="txt1" name="Text1" type="text" /></div><hr/></body> </html>總結
以上是生活随笔為你收集整理的Javascript阻止事件冒泡和浏览器默认行为的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （MATLAB）多个Excel表合成一个
- 下一篇： 有关颜色敏感度测试的软件是啥,测试你对颜