取消冒泡和阻止默认事件

778 阅读1分钟

<style type="text/css">

        .wrapper{
        width:200px;
        height:200px;
        background-color:crimson;
    }

</style>

</head>

<body>

      <div class="wrapper"></div>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <a href="#">www.baidu.com</a>
      <br>2)
      <a href="javascript:alert('a')">demo</a>
      在行间写void()相当于写返回值return...也可以取消默认事件
      <a href="javascript:void(false)">demo</a>
     <script type="text/javascript">

取消冒泡和阻止默认事件

取消冒泡:

1). W3C标准 event.stopPropagation();不支持IE9以下版本

2). IE独有 event.cancelBubble = true;

document.onclick=function(){
    console.log('朋友们');
}
var div = document.getElementsByTagName('div')[0];
div.onclick=function(e) {
    // e.stopPropagation();
    // e.cancelBubble=true;
    this.style.background="green"; 
}

封装取消冒泡的函数 stopBubble(event)

document.onclick=function(){
    console.log('朋友们');
}
var div = document.getElementsByTagName('div')[0];
div.onclick=function(e) {
    stopBubble(e);
    this.style.background="green"; 
}

function stopBubble(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

事件4,取消冒泡之前-06-24 223912.jpg

阻止默认事件

1.return false;以对象属性的方式注册的事件才生效//句柄式绑定事件方法应用版本,兼容性好

2.event.preventDefault(); W3C标注,IE9以下不兼容

3.event.returnValue = false;兼容IE

默认事件---表单提交,a标签跳转,右键菜单等

document.oncontextmenu = function(e){//右键出菜单事件
    console.log('一起进步');
    return false;//方法1--右键不出菜单了,出"一起进步"
    // e.preventDefault();//方法2
    // e.returnValue = false;//方法3
}

**封装阻止默认事件的函数 cancelHandler(event);**

事件4,阻止默认事件3种方法 225853.jpg

1)取消右键菜单事件
document.oncontextmenu = function(e){
    console.log('一起进步');
   cancelHandler(e);
}
function cancelHandler(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }//return false封装不进去,函数执行fn()-不能达到return false的程度
}

事件4-右键出菜单事件-24 225800.jpg

2)取消a标签的默认事件(跳转功能)
var a =document.getElementsByTagName('a')[0];
a.onclick = function(){
    return false;
}
function cancelHandler(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}