事件冒泡:从子元素向父元素触发,当某个事件触发时,同样的事件会向父元素触发,单并不是所有事件都会产生冒泡问题,onfocus,onblur,onload不会产生冒泡问题。
理解:一个盒子里面,有一个A盒子,A盒子有一个B盒子,B盒子有一个按钮,当这个按钮触发点击的时候,A和B盒子都得触发,所以要阻止它,这就叫阻止冒泡事件。
阻止冒泡事件@tap.native.stop="方法名"
<template>
<view class="read" id="read">
<view class="read-content" :class="'read-content'+index" :style="elStyle" v-for="(item,index) in list"
:key="index" @click="toClick">
{{item.content}}
</view>
<view class="top-info" v-if="setShow">
<view class="top-info-item">
<text text="上一章" block align="center" v-if="partInfo.previousPartNum != -1"
@tap.native.stop="toPrePart">上一章
</text>
</view>
<view class="top-info-item">
<text text="目录" align="center" @tap.native.stop="toMenu">目录</text>
</view>
<view class="top-info-item">
<text text="下一章" align="center" v-if="partInfo.nextPartNum != -1" @tap.native.stop="toNextPart">下一章
</text>
</view>
</view>
<view class="bottom-info" v-if="setShow">
<view class="bottom-info-item">
<text text="设置" prefixIcon="setting" size="17" lineHeight="20" :iconStyle="{fontSize: '20px'}"
align="center" @tap.native.stop="toSet">设置</text>
</view>
<view class="bottom-info-item">
<text text="|" align="center" size="17" color="#dadada">|</text>
</view>
<view class="bottom-info-item">
<text text="返回书城" prefixIcon="home" size="17" lineHeight="20" align="center"
:iconStyle="{fontSize: '20px'}" @tap.native.stop="toHome">返回书城</text>
</view>
</view>
<view class="bottom-info font-style" v-if="setStyleShow">
<view class="item">
<view class="item-title">
字号
</view>
<view class="item-cont">
<view class="item-cont-item" @click="setFontSize(1)">
-
</view>
<view class="item-cont-item" @click="setFontSize(2)">
+
</view>
</view>
</view>
<view class="item">
<view class="item-title">
背景
</view>
<view class="item-cont">
<view class="item-cont-item" :class="curColor==item?'active':''" @click="setBgColor(item)"
v-for="(item,index) in colors" :key="index" :style="'background-color:'+item+';'">
</view>
</view>
</view>
</view>
</view>
</template>