vue中提供 @touchmove.prevent 方法可以完美解决这个问题。
<div class="child" @touchmove.prevent ></div>
mint-ui解决移动端picker和datetime picker穿透滚动问题
<mt-datetime-picker
ref="picker"
type="date"
year-format="{value} 年"
month-format="{value} 月"
:startDate="startDate"
v-model="selectedMonth"
@confirm="monthConfirm"
@touchmove.native.stop.prevent
></mt-datetime-picker>
vue同时还提供了其他的修饰符:
阻止单击事件继续传播 :
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面 :
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联 :
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符 :
<form v-on:submit.prevent></form>
添加事件监听器时使用事件捕获模式, 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 :
<div v-on:click.capture="doThis">...</div>
只当在 event.target 是当前元素自身时触发处理函数 ,即事件不是从内部元素触发的 :
<div v-on:click.self="doThat">...</div>