Click on div except the button

I have a simple div with width 100%, with a button in it.

Problem is that when I add a click event to the div, my complete div becomes clickable (including the button as well);

I would want to make the whole div clickable with a different method while the button click with another method.

<div  @click="method1">
  <button @click="method2">click me</div>
</div>
<script>
export default {
methods: {
  method1() {
    console.log("div is clicked")
  },
  method2() {
    console.log("button is clicked")
  }
}
</script>

CodePudding user response：

there are two ways to achieve this in vue way:

you can use @click.self on the div and @click on the button
you can use @click.stop on the button and @click on the div

the first approach tells the div to only listen for the events where the event target is itself and the second one tells the button to stop event propagation and therefore click event does not reach the div

check the demo below:

new Vue({
  el: '#app',
  data: () => ({
    msg1: '',
    msg2: '',
  }),
  methods: {
    method1(v) {
      this[v] = 'clicked on div';
    },
    method2(v) {
      this[v] = 'clicked on button';
    }
  },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <div style="border: 2px solid red; width: 100%" @click.self="method1('msg1')">
    <button @click="method2('msg1')">click me</button>
  </div>
  <div>{{ msg1 }}</div>

  <div style="border: 2px solid green; width: 100%; margin-top: 20px" @click="method1('msg2')">
    <button @click.stop="method2('msg2')">click me</button>
  </div>
  <div>{{ msg2 }}</div>
</div>

CodePudding user response：

You can use stop modifier:

const app = Vue.createApp({
  methods: {
    method1() {
      console.log("div is clicked")
    },
    method2() {
      console.log("button is clicked")
    }
  }
})
app.mount('#demo')

.full-width {
  width: 100vW;
  height: 100vH;
  background: purple;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div  @click="method1">
  <button @click.stop="method2">click me</div>
</div>
</div>

CodePudding user response：

this should do the trick.

<template>
  <div id="myDiv" @click="handleDivClick">
    <button id="myButton" @click="handleButtonClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDivClick(event) {
      if (event.target.id === 'myButton') {
        // The button was clicked
        // Do something here
      } else {
        // The div was clicked, but not the button
        // Do something else here
      }
    },
    handleButtonClick() {
      // The button was clicked
      // Do something here
    },
  },
};
</script>

if it doesn't work i suggest you use vanilla javascript to implement this

CodePudding user response：

Just use @click.stop on the button and @click on the div. Like this :

<div  @click="method1">
  <button @click.stop="method2">click me</div>
</div>