原生js阻止默认事件和事件冒泡。

阻止原生事件

例如a链接的跳转，form标签的提交等等。
阻止默认事件使用preventDefault()函数，或者在js中return false也可以。

    <a href="https://www.baidu.com">百度</a>
    <form action="https://www.baidu.com">
        <input type="submit" value="提交" name="sub" id="submit">
    </form>
    
     <script>
        let a = document.querySelector('a')
        let input = document.getElementById('submit')
        a.onclick = function (e) {
            return false
        }
        input.addEventListener('click', function (e) {
            e.preventDefault();
        })
        
    </script>

当我们使用了preventDefault()或者return false后，就不会再跳转页面了。

阻止事件冒泡

阻止事件冒泡则使用stopPropagation()函数。

    <div id="a">
        <ul id="b">
            <li id="c">222222222</li>
        </ul>
    </div>

    <script>
        let c = document.querySelector('#c')
        let b = document.querySelector('#b')
        let a = document.querySelector('#a')
        
        c.addEventListener('click', function (e) {
            e.stopPropagation()
        })

        a.addEventListener('click', function () {
            console.log(`div触发`);
        })

        b.addEventListener('click', function () {
            console.log(`ul被触发`);
        })

    </script>

当我们使用stopPropagation()后，事件冒泡就被禁止了。

记录记录！