@tap事件和@click事件区别
tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的,例如,触摸、按住和轻滑。这时候就要用tap方法了。另外,click事假是点击放开之后才触发的,所以时间上会有延迟,大概200-300ms这样,可是我们在移动端的话就比较追求速度,所以就不能出现说有延迟的情况。所以用tap来代替click事件的话,对于针对移动设备的产品都适合。而且,tap还有一个特点就是『事件穿透』,就是你执行完绑定的tap事件之后呢,如果下面如果绑定了其他事件或者是本身就存在点子事件的话,也会默认触发。
uni-list-item标签中使用@tap
为什么我为uni-list-item添加@tap事件后,获得的event总是undiefined?
监听根元素的原生事件,使用 .native 修饰符
<template>
<view class="content">
<uni-list>
<uni-list-item class="news-list" v-for="(item,index) in news" :key="index" @tap.native="openInfo"
:data-newsid="item.post_id">
<image class="news_image" w :src="item.author_avatar" mode="widthFix" lazy-load='true'></image>
<view class="">
<text>{{ item.author_name }}</text>
<p>{{ item.created_at }}</p>
</view>
</uni-list-item>
</uni-list>
</view>
</template>
native就是把组件变回原生DOM的一种方式,相当于给组件绑定原生事件。
父组件
<svg-icon icon-class="user" @click="svgClickTag"></svg-icon>
//js methods部分
svgClickTag() {
console.log('svg-icon click in father.vue')
}
子组件:要想实现父组件内的点击事件,子组件必须监听点击并触发父组件定义的click
<svg :class="svgClass" aria-hidden="true" @click="clickSvgComponent">
<use :xlink:href="iconName"></use>
</svg>
//js methods部分
clickSvgComponent() {
this.$emit('click')
}
如果有了native修饰符,那就没有子组件什么事情了
//子组件照常写,不作任何事件绑定,删掉methods
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
//父组件
<svg-icon icon-class="user" @click.native="svgClickTag"></svg-icon>
针对vue-element-ui中的el-button
针对vue-element-ui中的el-button
<el-button type="primary" style="width: 100%;" :loading="loading"
@click.native.prevent="handleLogin">Sign in</el-button>
//个人认为这个库已经这某些地方把原生的click做了处理了,因为尝试过去掉native,照常成功