JavaScript事件冒泡及阻止冒泡的方法

方法一:

   事件回调函数内 e.stopPropagation()

方法二:

  事件回调函数内进行判断

if (e.target==e.currentTarget) {

要做的事情

}

   <div class="box1">
        <div class="box2">
            <span>我是span</span>
        </div>
    </div>

方法一:

   <script>
        const box1 = document.querySelector('.box1')
        const box2 = document.querySelector('.box2')
        const span = document.querySelector('span')
        box1.addEventListener('click',function (e) {
            console.log('box1');
        })
        box2.addEventListener('click',function (e) {
            console.log('box2');
            e.stopPropagation()
        })
       span.addEventListener('click',function (e) {
            console.log('span');
            e.stopPropagation()
        })
    </script>

方法二:

   <script>
        const box1 = document.querySelector('.box1')
        const box2 = document.querySelector('.box2')
        const span = document.querySelector('span')
        box1.addEventListener('click',function (e) {
            if (e.target==e.currentTarget) {
                console.log('box1');
            }
            console.log('box1');
        })
        box2.addEventListener('click',function (e) {
            if (e.target==e.currentTarget) {
                console.log('box2');
            }
            console.log('box2');
        })
       span.addEventListener('click',function (e) {
            if (e.target==e.currentTarget) {
                console.log('span');
            }
            console.log('span');
        })
    </script>