取消冒泡和阻止默认事件-一一网

<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="'a')">demo</a>
      在行间写void()相当于写返回值return...也可以取消默认事件
      <a href="">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;
    }
}
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端