开发者社区> 问答> 正文

阻止事件默认行为和阻止事件冒泡

阻止事件默认行为和阻止事件冒泡

展开
收起
珍宝珠 2020-02-14 14:27:31 1472 0
1 条回答
写回答
取消 提交回答
  • <div id="wrap" style="width: 200px; height: 200px; background: gray;">
        <div id="btn" style="width: 100px; height: 100px; background: orangered;"></div>
        <a id="prevent" target="_blank" href="http://www.baidu.com">preventDefault</a>
    </div>
    

    标准浏览器的使用方法 preventDefault(): 用于阻止事件的默认行为; 比如: a 链接的跳转行为和表单自动提交行为  

    var prevent = document.getElementById("prevent");
        prevent.addEventListener("click", function(event){
            event.preventDefault();
        }, false);
    
    //使用preventDefault()方法就阻止了a标签打开新窗口的默认行为
    
    

    stopPropagation(): 用于阻止事件的进一步获取和传播; 比如:阻止事件继续向上层冒泡

    var btn = document.getElementById("btn"),
        wrap= document.getElementById("wrap");
        btn.addEventListener("click",function(event){
            alert("btn");
            event.stopPropagation();
        },false);
        wrap.addEventListener("click",function(){
            alert("wrap");
        },false);
    
    //点击btn时,这样就阻止了id="btn"向上级id="wrap"冒泡,打印出来的结果是:弹窗仅弹出btn。否则,将会先弹出btn,然后弹出wrap。
    

    event.returnValue = false; //阻止事件的默认行为; event.cancelBubble = true; //阻止事件的进一步获取或者冒泡;

    function prevent(event) {
        event = event || window.event;
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false; 
        }
    }
    //使用 if else 去判断
    
    2020-02-14 14:29:29
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载