欢迎使用CSDN-markdown编辑器

js阻止冒泡和默认行为

 <div id="_1">
        <p>Click</p>
        <div>
            <button id='b2'>点击</button>
        </div>
   </div>
    <script>
    var Btn1 = document.getElementById('_1');
    var Btn2 = document.getElementById('b2');

   Btn1.addEventListener('click', function(){
        console.log('这是父元素！！！')
    });
    Btn2.addEventListener('click', function(){
        console.log('这是zizizizi元素！！！');
    })

    </script>

• 当点击父元素Btn1 会输出‘这是父元素’
• 当点击子元素Btn2 会输出 ‘这是zizizizi元素！！！’ ，‘这是父元素’
• 点击子元素Btn2时 同时触发了父元素，这一现象称为冒泡。
• 那么怎么阻止 这种情况的发生，使父、子事件相互独立。

 Btn1.addEventListener('click', function(event) {
         event.stopPropagation();
        console.log('这是父元素！！！')

    });
  Btn2.addEventListener('click', function(event) {
       event.stopPropagation();
        console.log('这是zizizizi元素！！！');
    })

• 这样就阻止了冒泡行为的发生。
• js阻止默认行为：event.preventDefault();
• 在开发项目中使用jQuery，在jQuery中return ；或者return false；这样既可以阻止冒泡又能阻止默认事件