事件流 阻止元素默认事件
1、事件流
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding:0 ; margin: 0; } #beijing{ width: 800px; height: 500px; background: mediumorchid; } #chaoyang{ width: 500px; height: 400px; background: orange; } #shunbailu{ width: 350px; height: 300px; background: palegreen; } </style> <script type="text/javascript"> // 冒泡型事件流是由最明确的事件源到不明确的事件源依次触发.离鼠标越近,就表示越明确 window.onload = function(){ document.getElementById('beijing').onclick = function(){ alert('北京'); } document.getElementById('chaoyang').onclick = function(e){ alert('朝阳'); // 在这里阻止事件流代码,后面的一次就不弹出来了 var dd = window.event || e; //获得对象 // 判断浏览器,因为IE和W3C的支持代码不同 if (document.all) { // IE方法 阻止事件流 在这个的后续就不显了 dd.cancelBubble = true; // W3C方法 阻止事件流 }else{ dd.stopPropagation(); } } document.getElementById('shunbailu').onclick = function(){ alert('顺白路'); } } </script> </head> <body> <div id="beijing">北京 <div id="chaoyang">朝阳 <div id="shunbailu">顺白路</div> </div> </div> </body> </html> 2、阻止元素默认事件
方法（1）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var dd = document.getElementById('dd'); dd.onclick = function(e){ alert('点击了优酷'); // 获得事件对象 var tt = window.event || e; // 浏览器判断 阻止浏览器默认的(后续)事件 if (document.all) { tt.returnValue = false; //IE } else{ tt.preventDefault(); //W3C } } } </script> </head> <body> <a href="http://baidu.com" id="dd">优酷</a> <!--阻止浏览器事件一般用在 a标签，和submit这个提交按钮里--> <!--<form action=""> <input type="submit" name="" id="" value="" /> </form>--> </body> </html> 方法（2）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var dd = document.getElementById('dd'); dd.onclick = function(){ alert('点击了优酷'); } } </script> </head> <body> <!--如果写一个javascript就会执行js代码了，就不会点击跳转了--> <!--void(0)这个是一个固定写法--> <a href="javascript:void(0)" id="dd">优酷</a> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知