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

時間 2019-11-20

標籤 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="http://code.jquery.com/jquery-1.6.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
//先彈出'單擊了div',後彈出'單擊了document'
$('div.c1').click(function(e){alert('單擊了div');});
//只彈出'單擊了div'
$('div.c2').click(function(e){alert('單擊了div');stopBubble(e);});
//單擊body,彈出'單擊了document'
$(document).click(function(e){alert('單擊了document');});
$('#txt1').val('123');
//阻止冒泡彈出"單擊了document"
$('#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 提供了兩種方式來阻止事件冒泡，Jquery阻止默認動做即通知瀏覽器不要執行與事件關聯的默認動做，下文有個不錯的示例，須要的朋友能夠參考下jquery

js阻止冒泡
在阻止冒泡的過程當中，W3C和IE採用的不一樣的方法，那麼咱們必須作如下兼容。
編程

代碼以下:瀏覽器

function stopPro(evt){ 
    var e = evt || window.event; 
//  returnValue若是設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲 fasle， 
//能夠取消發生事件的源元素的默認動做。 
//  window.event?e.returnValue = false:e.preventDefault(); 
    window.event?e.cancelBubble=true:e.stopPropagation(); 
}

或者：
函數

代碼以下:測試

function cancelBubble(e) { 
    var evt = e ? e : window.event; 
    if (evt.stopPropagation) { 
    //W3C 
        evt.stopPropagation(); 
    }else { 
    //IE 
    evt.cancelBubble = true; 
}

JQuery 提供了兩種方式來阻止事件冒泡。
方式一：event.stopPropagation();
ui

$("#div1").mousedown(function(event){ 
    event.stopPropagation(); 
});

方式二：return false;

代碼以下:

$("#div1").mousedown(function(event){ 
    return false; 
});

Jquery阻止默認動做即通知瀏覽器不要執行與事件關聯的默認動做。
例如：

代碼以下:

$("a").click(function(event){ 
    event.preventDefault(); //阻止默認動做即該連接不會跳轉。 
    alert(4);//可是這個還會彈出 
    event.stopPropagation();//阻止冒泡事件，上級的單擊事件不會被調用 
    return false;//不只阻止了事件往上冒泡，並且阻止了事件自己 
});

可是這兩種方式是有區別的。return false 不只阻止了事件往上冒泡，並且阻止了事件自己。event.stopPropagation() 則只阻止事件往上冒泡，不阻止事件自己。
場景應用：Google 和百度的聯想框，當彈出下拉列表，用戶在下拉列表區域按下鼠標時須要讓光標仍然保持在文本輸入框。

Jquery案例1：

<!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="http://code.jquery.com/jquery-1.6.min.js">
    </script>
    <script type="text/javascript"> 
        $(function(){ 
            //父元素綁定單擊事件
            $("#ee").click(function(){ 
                alert("ee"); 
            }); 
            //子元素綁定單擊事件,會彈出"aa"和3
            $("#aa").click(function(event){ 
                alert("aa"); 
                event.preventDefault(); //阻止默認行爲
                event.stopPropagation(); //阻止向父頁面冒泡
                alert(3); 
            }); 
            //子元素綁定單擊事件,會彈出4,不會跳轉
            $("a").click(function(event){ 
                event.preventDefault(); //阻止超連接a的默認行爲---"跳轉"
                alert(4); 
                event.stopPropagation(); //阻止向父頁面冒泡
                return false; 
            }); 
        }); 
    </script>

</head>

<body>
   <div id="ee" style="border: 1px solid"> 
        我是div的內容
        <input id="aa" type="button" value="test" /> 
        <a href="http://baidu.com">我是指向www.baidu.com的超連接</a> 
    </div> 
</body>
</html>

案例2:

<!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="http://code.jquery.com/jquery-1.6.min.js">
    </script>
    <script type="text/javascript"> 
        function tt(){ 
            alert("div"); 
        } 
        function ttt(){ 
            //在全部瀏覽器中獲取event對象
            var e = arguments.callee.caller.arguments[0] || window.event; 
            //阻止默認事件"跳轉",若是不這麼寫,那麼會在彈出"3","4"以後,跳轉到"百度"頁面
            window.event?e.returnValue = false:e.preventDefault(); 
            alert(3); 
            //阻止向父元素冒泡
            window.event?e.cancelBubble = true:e.stopPropagation(); 
            alert(4); 
        } 
    </script> 
</head> 
<body> 
    <div onclick = "tt();" style="border: 1px solid"> 
        我是div的內容 
        <a href="http://baidu.com" onclick="ttt();">我是指向"www.baidu.com"的超連接</a> 
    </div> 
</body>
</html>