<div id="app">
<div class="ring_wrapper">
<p>父親ブロックあり</p>
<div class="father" @click="fatherClick">
<button class="child" @click="childClick">
呼び鈴
</button>
</div>
</div>
<div class="fatherBlock ring_wrapper">
<p>父親ブロックなし</p>
<div class="father" @click="fatherClick">
<button class="child" @click.stop="childClick">
呼び鈴
</button>
</div>
</div>
</div>
#app {
text-align: center;
}
.ring_wrapper {
background-color: #ddd;
width: 150px;
margin: 10px auto;
padding: 5px;
}
.father, .child, button {
width: 100%;
height: 100%;
}
const app = new Vue({
el: '#app',
data: {
text: ''
},
methods: {
childClick() {
alert('彼女「たかし君!いらっしゃい!」')
},
fatherClick() {
alert('父「うちの子に何か用かい?」')
}
}
})
This Pen doesn't use any external CSS resources.