阻止事件冒泡

121 阅读1分钟

分享一首音乐music.163.com/#/song?id=5…

事件冒泡:从子元素向父元素触发,当某个事件触发时,同样的事件会向父元素触发,单并不是所有事件都会产生冒泡问题,onfocus,onblur,onload不会产生冒泡问题。

image.png

image.png

理解:一个盒子里面,有一个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>