首頁(yè)技術(shù)文章正文

如何阻止瀏覽器默認(rèn)行為和阻止事件傳播?

更新時(shí)間:2021年10月29日16時(shí)08分來(lái)源:傳智教育瀏覽次數(shù):

阻止瀏覽器默認(rèn)行為和防止事件傳播主要通過(guò)先下面兩個(gè)方法實(shí)現(xiàn)

event.preventDefault()： 取消瀏覽器對(duì)當(dāng)前事件的默認(rèn)行為，比如點(diǎn)擊鏈接后，瀏覽器跳轉(zhuǎn)到指定頁(yè)面，或者按一下空格鍵，頁(yè)面向下滾動(dòng)一段距離。

event.stopPropagation()： 阻止事件在DOM中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點(diǎn)上的監(jiān)聽(tīng)函數(shù)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止瀏覽器默認(rèn)行為-黑馬程序員web前端培訓(xùn)高手班http://web.itheima.com</title>
</head>
<body>
    <div id="div2">2
        <div id="div1">1
            <a id="a" href="http://www.itheima.com" target="_blank">黑馬程序員</a>
        </div>
    </div>
</body>
<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){
        alert('d2');
    }
    d1.onclick = function(e){
        alert('d1');
    }
    a.onclick = function(e){
        alert('a');
    }
</script>
</html>

未阻止瀏覽器默認(rèn)行為和阻止事件傳播之前

未阻止之前效果

阻止瀏覽器默認(rèn)行為

<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){
        alert('d2');
    }
    d1.onclick = function(e){
        alert('d1');
    }
    a.onclick = function(e){
        alert('a');
        // 阻止瀏覽器默認(rèn)行為
        e.preventDefault();
    }
</script>

由于e.preventDefault()阻止了瀏覽器默認(rèn)行為，所以點(diǎn)擊“黑馬程序員”，不會(huì)跳轉(zhuǎn)黑馬程序員官網(wǎng)。

阻止瀏覽器行為之后效果

阻止事件傳播

<script>
    var d2 = document.getElementById('div2');
    var d1 = document.getElementById('div1');
    var a = document.getElementById('a');
    d2.onclick = function(e){
        alert('d2');
    }
    d1.onclick = function(e){
        alert('d1');
    }
    a.onclick = function(e){
        //阻止事件傳播
        e.stopPropagation();
        alert('a');
    }
</script>

由于e.stopProgation()阻止了事件傳播，d1和d2對(duì)象綁定的事件不會(huì)再觸發(fā)，直接跳轉(zhuǎn)到了http://www.itheima.com。

阻止事件傳播效果