阻止事件冒泡
阻止事件冒泡
王畅裕 发表于2年前
阻止事件冒泡
  • 发表于 2年前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   


1、cancelBubble(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

3、 preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:400px; height:300px; background:#CCC; display:none;}
</style>
<script>
window.onload=function ()
{
     var oBtn=document.getElementById('btn1');
     var oDiv=document.getElementById('div1');
    
     oBtn.onclick=function (ev)
     {
          var oEvent=ev||event;
         
          oDiv.style.display='block';
          //alert('按钮被点击了');
         
          oEvent.cancelBubble=true;
     };
    
     document.onclick=function ()
     {
          oDiv.style.display='none';
          //alert('document被点击了');
     };
};
</script>
</head>
<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>


标签: 事件冒泡
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 7
码字总数 1364
×
王畅裕
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: