更新時間:2021年10月29日16時08分 來源:傳智教育 瀏覽次數(shù):
阻止瀏覽器默認(rèn)行為和防止事件傳播主要通過先下面兩個方法實(shí)現(xiàn)
event.preventDefault(): 取消瀏覽器對當(dāng)前事件的默認(rèn)行為,比如點(diǎn)擊鏈接后,瀏覽器跳轉(zhuǎn)到指定頁面,或者按一下空格鍵,頁面向下滾動一段距離。
event.stopPropagation(): 阻止事件在DOM中繼續(xù)傳播,防止再觸發(fā)定義在別的節(jié)點(diǎn)上的監(jiān)聽函數(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)擊“黑馬程序員”,不會跳轉(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對象綁定的事件不會再觸發(fā),直接跳轉(zhuǎn)到了http://www.itheima.com。