Jquery阻止冒泡

一、JS阻止冒泡

我们首先来看一下JS中如何阻止事件冒泡。在JS中我们可以使用Event对象的stopPropagation方法，来阻止事件向父级元素传递，代码如下：

document.getElementById('child').addEventListener('click', function(event){
  event.stopPropagation();
  console.log('我点击了子元素！');
});

document.getElementById('parent').addEventListener('click', function(){
  console.log('我点击了父元素！');
});

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。

二、JQ阻止冒泡和默认事件

JQ库为我们提供了一个方便的事件处理函数：e.stopPropagation()和e.preventDefault()。其中e.stopPropagation()功能和JS中stopPropagation()一样，用于阻止事件冒泡。而e.preventDefault()则用来阻止事件的默认行为，例如阻止a标签的跳转。代码如下：

$('#child').click(function(e){
  e.stopPropagation();
  console.log('我点击了子元素！');
});

$('#parent').click(function(e){
  console.log('我点击了父元素！');
});

$('a').click(function(e){
  e.preventDefault();
})

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发；当我们点击a标签时，不会跳转到链接的地址。

三、Vue阻止冒泡事件

在Vue中，我们可以使用v-on的修饰符.stop阻止事件向上传播，代码如下：

   

<script>
export default {
  methods: {
    parentClick() {
      console.log('我点击了父元素！');
    },
    childClick() {
      console.log('我点击了子元素！');
    }
  }
};
</script>

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。

四、JS阻止事件冒泡的方法

除了使用Event对象的stopPropagation方法外，我们还可以使用Event对象的cancelBubble属性等同于stopPropagation()方法，来阻止事件冒泡。代码如下：

document.getElementById('child').addEventListener('click', function(event){
  event.cancelBubble = true;
  console.log('我点击了子元素！');
});

document.getElementById('parent').addEventListener('click', function(){
  console.log('我点击了父元素！');
});

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。

五、阻止冒泡的两种方法

在JQ中，除了使用stopPropagation()方法外，我们还可以使用return false来阻止事件冒泡。代码如下：

$('#child').click(function(){
  console.log('我点击了子元素！');
  return false;
});

$('#parent').click(function(){
  console.log('我点击了父元素！');
});

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。

六、小程序阻止冒泡事件

在小程序中，我们可以使用catchtap事件来阻止事件冒泡。代码如下：

Page({
  parentTap: function() {
    console.log('我点击了父元素！');
  },
  childTap: function() {
    console.log('我点击了子元素！');
  }
});

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。

七、阻止事件冒泡的方法

在DOM标准中，可以通过Event对象的stopPropagation方法来阻止事件冒泡。在IE中，可以使用Event对象的cancelBubble属性等同于stopPropagation()方法，来阻止事件冒泡。代码如下：

document.getElementById('child').addEventListener('click', function(event){
  event.stopPropagation();
  console.log('我点击了子元素！');
});

document.getElementById('parent').addEventListener('click', function(){
  console.log('我点击了父元素！');
});

document.getElementById('child').attachEvent('onclick', function(event){
  event.cancelBubble = true;
  console.log('我点击了子元素！');
});

document.getElementById('parent').attachEvent('onclick', function(){
  console.log('我点击了父元素！');
});

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。

八、如何阻止事件的冒泡

事件冒泡是指事件从最内层的元素开始，逐级向上传递到最外层的元素。阻止事件冒泡可以避免父级元素也响应该事件。在JQ中，我们可以使用stopPropagation()来阻止事件冒泡。在DOM标准中，我们可以使用Event对象的stopPropagation方法来阻止事件冒泡。在IE中，我们可以使用Event对象的cancelBubble属性等同于stopPropagation()方法，来阻止事件冒泡。

九、JQ事件冒泡和事件捕获

在JQ中，我们可以使用事件委派来处理事件冒泡。事件委派是指将事件绑定到父元素上，在冒泡阶段中捕获到子元素的事件。代码如下：

   

  
    
1
  
    
2
  
    
3

   

$('#parent').on('click', '.child', function(){
  console.log('我点击了子元素！');
});

运行结果：当我们在子元素上点击时，子元素的事件被触发。

事件捕获则是先发生于父元素，再向下传递到子元素。但JQ默认情况下是在事件冒泡阶段中捕获事件。如果想要在事件捕获阶段中处理事件，可以使用第三个参数传入true，指定事件在捕获阶段中处理。代码如下：

$('#parent').on('click', '.child', function(){
  console.log('我点击了子元素！');
}, true);

运行结果：当我们在子元素上点击时，父元素的事件被触发。

十、Uniapp阻止事件冒泡

在Uniapp中，可以使用catchtap事件来阻止事件冒泡。代码如下：

export default {
  methods: {
    parentTap() {
      console.log('我点击了父元素！');
    },
    childTap() {
      console.log('我点击了子元素！');
    }
  }
}

运行结果：当我们在子元素上点击时，只有子元素的事件被触发，父元素的事件不会被触发。