javascript阻止事件冒泡和瀏覽器的默認行爲

時間 2019-11-10

標籤 javascript 阻止事件冒泡瀏覽器默認行爲欄目 JavaScript 简体版

原文原文鏈接

在使用javascript編程時會遇到一個問題,就是當你給html添加事件時,因爲瀏覽器默認的爲冒泡型事件觸發機制,因此會觸發你不想觸發的事件.那麼經過以下的函數能夠解決這個問題.[兼容IE和FF]javascript

1.阻止事件冒泡,使成爲捕獲型事件觸發機制.css

function stopBubble(e) { 
//若是提供了事件對象，則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //所以它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else
    //不然，咱們須要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

2.當按鍵後,不但願按鍵繼續傳遞給如HTML文本框對象時,能夠取消返回值.即中止默認事件默認行爲.html

//阻止瀏覽器的默認行爲 
function stopDefault( e ) { 
    //阻止默認瀏覽器動做(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函數器默認動做的方式 
    else
        window.event.returnValue = false; 
    return false; 
}

那麼經過下面的一段代碼咱們來看下函數一的效果:java

<!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中阻止函數器默認動做的方式 
    else 
        window.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>

上面的效果測試中,jquery

函數一:IE6.0,FireFox,Chrome,Opera均有效編程

函數二:在IE中測試效果很好;Chrome,Opera無效,在FF中,按鍵時,若是在瀏覽器

$('#txt1').keydown(function(e){stopDefault(e);alert('你按下了鍵值'+e.keyCode); });函數

這句話打個斷點在執行,能夠達到效果.可是若是不打斷點則沒有效果,沒找出具體緣由,若是有知道的能夠說出來你們討論下.測試