fix click events

packages/client/src/components/MkCwButton.vue

@@ -1,5 +1,5 @@
 <template>
-<button class="nrvgflfu _button" @click.stop.prevent="toggle">
+<button class="nrvgflfu _button" @click.stop="toggle">
 	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
 	<span v-if="!modelValue">{{ label }}</span>
 </button>

packages/client/src/components/MkMediaList.vue

@@ -2,7 +2,7 @@
 <div class="hoawjimk">
 	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
-		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop.prevent>
+		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop>
 			<template v-for="media in mediaList.filter(media => previewable(media))">
 				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
 				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>

packages/client/src/components/MkMention.vue

@@ -1,12 +1,12 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
 	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
+<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span class="host">@{{ toUnicode(host) }}</span>

packages/client/src/components/MkNote.vue

@@ -25,7 +25,7 @@
 				</template>
 			</I18n>
 			<div class="info">
-				<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
+				<button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
 					<i v-if="isMyRenote" class="ph-dots-three-outline-bold ph-lg dropdownIcon"></i>
 					<MkTime :time="note.createdAt"/>
 				</button>
@@ -33,24 +33,24 @@
 			</div>
 		</div>
 	</div>
-	<article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))">
+	<article class="article" @contextmenu.stop="onContextmenu" @click="router.push(notePage(appearNote))">
-		<div class="main" @click.self="router.push(notePage(appearNote))">
+		<div class="main">
 			<div class="header-container">
 				<MkAvatar class="avatar" :user="appearNote.user"/>
 				<XNoteHeader class="header" :note="appearNote" :mini="true"/>
 			</div>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis" @click.stop/>
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
-					<div class="text" @click.self="router.push(notePage(appearNote))">
+					<div class="text">
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis" @click.stop/>
 						<!-- <a v-if="appearNote.renote != null" class="rp">RN:</a> -->
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
-							<div v-else class="translated">
+							<div v-else class="translated" @click.stop>
 								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
 								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 							</div>
@@ -62,14 +62,14 @@
 					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
 					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
-					<button v-if="isLong && collapsed" class="fade _button" @click.stop.prevent="collapsed = false">
+					<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
 						<span>{{ i18n.ts.showMore }}</span>
 					</button>
-					<button v-else-if="isLong && !collapsed" class="showLess _button" @click.stop.prevent="collapsed = true">
+					<button v-else-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
 						<span>{{ i18n.ts.showLess }}</span>
 					</button>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`" @click.stop><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<MkNoteFooter :note="appearNote"></MkNoteFooter>
 		</div>

packages/client/src/components/MkNoteFooter.vue

@@ -1,5 +1,5 @@
 <template>
-	<footer ref="el" class="footer" @click.stop.prevent>
+	<footer ref="el" class="footer" @click.stop>
 		<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
 			<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>

packages/client/src/components/MkNoteHeader.vue

@@ -2,7 +2,7 @@
 <header class="kkwtjztg">
 	<div class="user-info">
 		<div>
-			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
+			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)" @click.stop>
 				<MkUserName :user="note.user" class="mkusername">
 					<span v-if="note.user.isBot" class="is-bot">bot</span>
 				</MkUserName>

packages/client/src/components/MkNoteSimple.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="yohlumlk">
+<div v-size="{ min: [350, 500] }" class="yohlumlk" @click.stop>
 	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<XNoteHeader class="header" :note="note" :mini="true"/>

packages/client/src/components/MkPoll.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="tivcixzd" :class="{ done: closed || isVoted }">
 	<ul>
-		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
+		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click.stop="vote(i)">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
 				<template v-if="choice.isVoted"><i class="ph-check-bold ph-lg"></i></template>
@@ -13,7 +13,7 @@
 	<p v-if="!readOnly">
 		<span>{{ i18n.t('_poll.totalVotes', { n: total }) }}</span>
 		<span> · </span>
-		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
+		<a v-if="!closed && !isVoted" @click.stop="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
 		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
 		<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
 		<span v-if="remaining > 0"> · {{ timer }}</span>

packages/client/src/components/MkSubNoteContent.vue

@@ -19,10 +19,10 @@
 		<summary>{{ i18n.ts.poll }}</summary>
 		<XPoll :note="note"/>
 	</div>
-	<button v-if="isLong && collapsed" class="fade _button" @click.stop.prevent="collapsed = false">
+	<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
 		<span>{{ i18n.ts.showMore }}</span>
 	</button>
-	<button v-if="isLong && !collapsed" class="showLess _button" @click.stop.prevent="collapsed = true">
+	<button v-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
 		<span>{{ i18n.ts.showLess }}</span>
 	</button>
 </div>

packages/client/src/components/MkUrlPreview.vue

@@ -1,12 +1,12 @@
 <template>
-<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
+<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`" @click.stop>
 	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ph-x-bold ph-lg"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 </div>
-<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
+<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter" @click.stop>
 	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 </div>
-<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
+<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview" @click.stop>
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">

packages/client/src/components/global/MkAvatar.vue

@@ -3,7 +3,7 @@
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
 </span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target" @click.stop>
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
 </MkA>

packages/client/src/components/global/MkUrl.vue

@@ -1,7 +1,7 @@
 <template>
 <component
 	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	@contextmenu.stop="() => {}"
+	@contextmenu.stop="() => {}" @click.stop
 >
 	<template v-if="!self">
 		<span class="schema">{{ schema }}//</span>