jQuery----阻止（阻止冒泡事件、阻止默认事件的执行）

<script src="./jquery.min.js"></script>
<script>
    // 阻止冒泡事件和阻止默认事件的执行

    // 冒泡事件
    // 子级标签触发事件,会同时触发,父级标签上,相同类型的事件
    // jquery中,阻止冒泡事件,是不需要考虑兼容的
    // 直接给标签事件处理函数添加参数,也就是 事件对象 
    // 事件对象.stopPropagation();  

    // 阻止默认事件的执行
    // 直接给标签事件处理函数添加参数,也就是 事件对象 
    // 事件对象.preventDefault();  
    // 在 jQuery中 还有一种方式 
    // return false 可以阻止一切,包括 冒泡 和 默认 事件的执行
    // 但是要注意, return false 会阻止其他程序的执行,必须要放在合理的位置上

    

    $('.box').click(function(e){
        // 阻止冒泡事件
        e.stopPropagation();           
        console.log('您点击是的box,div')
    })
    $('.middle').click(function(e){
        // 阻止冒泡事件
        e.stopPropagation();
        console.log('您点击是的middle,div')
    })
    $('.inner').click(function(e){
        // 阻止冒泡事件
        e.stopPropagation();
        console.log('您点击是的middle,div')
    })

    

    
    // 例如,form表单的submit事件

    $('form').submit(function(e){
        let nameVal = $('input').val();
        if(nameVal !== '张三'){
            // 阻止表单的默认提交事件
            e.preventDefault();
        } 
    })


    // 实际项目中,如果使用form发送 ajax请求 
    // 必须添加阻止默认事件执行

    $('form').submit(function(e){
        // 如果是发送ajax请求,即时写了return阻止了函数的执行
        // 但是form表单有默认的提交事件,也会执行提交
        // 必须先阻止默认事件的执行
        e.preventDefault();
        // 如果账号密码正确,会发送ajax请求

        let nameVal = $('input').val();
        if( nameVal !== '张三' ){
            // 如果账号不是张三,就执行return,总之发送请求
            return;
        }

        // const xhr = new XMLHttpRequest()
        // xhr.open(...)
        // xhr.send()
        // xhr.onload = function(){}
    })

</script>