在使用vue开发项目,在父组件上监听点击事件和触摸事件。子元素上有单独的事件处理函数。大致代码如下。

<div @click="foo()" @touchend="foo()">
	<div @click.stop="baz()" @touchend.stop="baz()"></div>
</div>

按照常规理解,这段代码不会触父元素的事件函数回调。但是,值得注意的是,这段代码中foo函数会被执行,就算我们设置了 stop。

原因:触发 touch 事件的同时会触发 click 事件,而这个触发的 Click 事件就冒泡到父元素了。所以,我们需要禁止这个click事件的触发。通过MDN查询到,使用 preventDefault 可以禁止触发Click事件。