冒泡的样子

最近我们跟vue做了一个需求，大概是同一个区域。点击不同的位置有不同的响应功能，也有总响应功能，ok，如下图：所示

他们的DOM结构如下：

列表数据中的Div v-for=' (item，index)' @ click=' handleclick 3 ' El-col : span=' grid ' div @ click=' handleclick1 '/div/El-col-col @ click=' handleclick 2 '/El-col/div在这里冒泡这是因为时间冒泡机制，导致了' handleclick 1 '的响应。很多时候这是不可取的，我也不希望它在这里。

看看冒泡或

图中的步骤4、5、6和7是鼓泡阶段。

通解

事件正在冒泡，所以阻止它冒泡。由于不同的浏览器防止事件冒泡的方法不同，建议手写一个防止事件冒泡的方法。

function stopperpagation(event){ var e=arguments . caller . caller . arguments[0]| | event；//这是因为除了IE之外其他浏览器都没有事件，所以需要兼容if(window.event){ //这是IE浏览器e.cancelBubble=true} else if(e . stopperpagation){//这是其他浏览器的e . stopperpagation()；//防止冒泡事件}}按钮onclick='停止传播(事件)'按钮/button //使用vue中的解决方案

上述兼容方法与事件和气泡停止方法都兼容。然而，在vue中，需要在内联语句处理器中访问原始的DOM事件。您可以使用特殊变量$event将其传递给方法。如：

按钮on:click=' warn '(表单尚未提交。$event)'提交/按钮//.methods: { warn:函数(message，Event) {//现在我们可以访问本机事件对象if (event) event。prevent default()alert(message)} }，所以这里我们可以简化一下上面的气泡停止方法：

函数stopPropagation(事件){ if(事件){ event.stopPropagation？event . stopperpagement(): event . cancel ubble=true；}} evnet是$event

处理vue中气泡的标准姿势

事件修饰符

Vue.js为v-on提供事件修饰符，这些修饰符由点开头的指令后缀表示。这些事件修饰符主要包括以下：

阻止阻止捕捉阻止自我一旦被动看到了吗，第一个‘停止’就是我们想要的！

这些修饰语就是为了解决这些问题而诞生的。也就是说，我们只需要在模板中写入这个就可以停止冒泡。

列表数据中的div v-for='(item，Index)' @ click=' handleclick 3 ' El-col : span=' grid ' div @ click。stop=' handleclick 1 '/div/El-colel-col @ click。stop=' handleclick2'/El-col/div是完美的，所以不需要响应事件

除了冒泡，vue提供的修改器也有这些功能。

！-防止点击事件扩散-a v-: click。停下来！-提交事件不再重载页面-表单v-: submit . prevent=' on submit '/表单！-修饰符可以串联-a v-: click。停下来。防止='那样做'/a！-仅修饰符-形成v-on:submit.prevent/form!-添加事件侦听器时使用事件捕获模式-！-即元素触发的事件先在这里处理，再由内部元素处理-div v-: click。capture=' dothis './div！-仅当event.target是当前元素本身时才触发处理程序-！-也就是说，事件不是从内部元素触发的-div v-: click。self='做那件事'./div以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。