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

阻止事件冒泡和默认行为的方法

1. e.stopPropagation() //最常见的方法，只能阻止事件冒泡。
2. event.preventDefault() //能阻止默认行为，但是不能阻止事件冒泡。
3. window.event.returnValue = false; return false; //能阻止默认行为，但是不能阻止事件冒泡。
4. e.stopPropagation()； window.event.returnValue = false; return false; //既可以阻止事件冒泡又能阻止默认行为。

第一次写博客

第一次动手记录一些自己的动手结果，分享给大家，有什么问题可以提出来哦！一起讨论

html代码展示

css代码展示：

js代码展示：

function $(element) {
        return document.getElementById(element);
    }
    console.log($('outer'))
    $('outer').addEventListener("click", function (e) {
        consloe.log('最外圈')

    })
    $('middle').addEventListener("click", function (e) {
        console.log('中间圈')
    })
    $('inner').addEventListener("click", function (e) {
        consloe.log('里面圈')
    })
    

点击最里面最小盒子效果

可以看出所有事件全部被触发！a标签的默认事件也被触发

e.stopPropagation() //最常见的方法，只能阻止事件冒泡。

function $(element) {
        return document.getElementById(element);
    }
    console.log($('outer'))
    $('outer').addEventListener("click", function (e) {
        consloe.log('最外圈')

    })
    $('middle').addEventListener("click", function (e) {
        console.log('中间圈')
    })
    $('inner').addEventListener("click", function (e) {
        consloe.log('里面圈')
        e.stopPropagation();  //最常见的方法，只能阻止事件冒泡。
    })
    

点击最小盒子效果：

可以看出默认事件不触发，但是事件冒泡全部被触发了！

event.preventDefault() //能阻止默认行为，但是不能阻止事件冒泡。

function $(element) {
        return document.getElementById(element);
    }
    console.log($('outer'))
    $('outer').addEventListener("click", function (e) {
        consloe.log('最外圈')

    })
    $('middle').addEventListener("click", function (e) {
        console.log('中间圈')
    })
    $('inner').addEventListener("click", function (e) {
        consloe.log('里面圈')
        e.stopPropagation(); //能阻止默认行为，但是不能阻止事件冒泡。
    })
    

点击最小盒子效果：

可以看出冒泡不触发，但是a标签的默认事件被触发跳转了！

window.event.returnValue = false; return false; //能阻止默认行为，但是不能阻止事件冒泡。

function $(element) {
        return document.getElementById(element);
    }
    console.log($('outer'))
    $('outer').addEventListener("click", function (e) {
        consloe.log('最外圈')

    })
    $('middle').addEventListener("click", function (e) {
        console.log('中间圈')
    })
    $('inner').addEventListener("click", function (e) {
        consloe.log('里面圈')
        window.event.returnValue = false;    return false; //能阻止默认行为，但是不能阻止事件冒泡。
    })
    

点击最小盒子效果：

可以阻止默认行为，但是不能阻止事件冒泡！

后面开始把默认行为和冒泡事件都阻止了！

e.stopPropagation()；window.event.returnValue = false; return false; //即能阻止默认行为，又能阻止冒泡事件

function $(element) {
        return document.getElementById(element);
    }
    console.log($('outer'))
    $('outer').addEventListener("click", function (e) {
        consloe.log('最外圈')

    })
    $('middle').addEventListener("click", function (e) {
        console.log('中间圈')
    })
    $('inner').addEventListener("click", function (e) {
        consloe.log('里面圈')
        
        e.stopPropagation();
        window.event.returnValue = false;    
        return false; //能阻止默认行为，又能阻止冒泡事件
    })
    

e.stopPropagation()；event.preventDefault() ; //即能阻止默认行为，又能阻止冒泡事件

function $(element) {
        return document.getElementById(element);
    }
    console.log($('outer'))
    $('outer').addEventListener("click", function (e) {
        consloe.log('最外圈')

    })
    $('middle').addEventListener("click", function (e) {
        console.log('中间圈')
    })
    $('inner').addEventListener("click", function (e) {
        consloe.log('里面圈')
        
        e.stopPropagation();
        event.preventDefault() ;  //即能阻止默认行为，又能阻止冒泡事件
    })
    

点击最小盒子效果

可以看到默认行为和事件冒泡都阻止了！上面两种方法都可取！都能达到上图这种效果！

本文章是个人自己动手实验出来的！第一次写博客有问题可以提出来讨论，希望对大家有用！