Press the div, excluding the button - Vue

Question

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside.

The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it).

What I want is for the whole div to be clickable with one method, while the button should trigger a different method when clicked.

<div class="full-width" @click="method1">
  <button @click="method2">Click me</button>
</div>
<script>
export default {
methods: {
  method1() {
    console.log("Div clicked")
  },
  method2() {
    console.log("Button clicked")
  }
}
</script>

javascript css vue.js vuejs2 vuejs3

Answer 1

Answer №1

Vue offers two different methods to achieve this functionality:

You can utilize @click.self on the div element and @click on the button
Alternatively, you can apply @click.stop on the button and @click on the div

The first approach instructs the div to only respond to events where the target is itself. On the other hand, the second method prevents event propagation on the button, ensuring that the click event does not propagate to the div

edit: included both techniques for handling select elements

Feel free to check out the demonstration below:

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

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92fcffffdaf8c6ff">[email protected]</a>/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 style="border: 2px solid blue; width: 100%; margin-top: 20px" @click.self="method1('msg3')">
    <select @click="method2('msg3', 'select')">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </div>
  <div style="text-align: right">{{ msg3 }}</div>

  <div style="border: 2px solid orange; width: 100%; margin-top: 20px" @click="method1('msg4')">
    <select @click.stop="method2('msg4', 'select')">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </div>
  <div style="text-align: right">{{ msg4 }}</div>
</div>

Answer 2

Vue offers two different methods to achieve this functionality:

You can utilize @click.self on the div element and @click on the button
Alternatively, you can apply @click.stop on the button and @click on the div

The first approach instructs the div to only respond to events where the target is itself. On the other hand, the second method prevents event propagation on the button, ensuring that the click event does not propagate to the div

edit: included both techniques for handling select elements

Feel free to check out the demonstration below:

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

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92fcffffdaf8c6ff">[email protected]</a>/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 style="border: 2px solid blue; width: 100%; margin-top: 20px" @click.self="method1('msg3')">
    <select @click="method2('msg3', 'select')">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </div>
  <div style="text-align: right">{{ msg3 }}</div>

  <div style="border: 2px solid orange; width: 100%; margin-top: 20px" @click="method1('msg4')">
    <select @click.stop="method2('msg4', 'select')">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </div>
  <div style="text-align: right">{{ msg4 }}</div>
</div>

Answer 3

Answer №2

Give this a try, it should work like a charm.

<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') {
        // Button click logic
        // Implement your code here
      } else {
        // Div click logic
        // Implement another code here
      }
    },
    handleButtonClick() {
      // Button click logic
      // Implement your code here
    },
  },
};
</script>

If this doesn't solve the issue, I recommend using vanilla JavaScript for this implementation.

Answer 4

Give this a try, it should work like a charm.

<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') {
        // Button click logic
        // Implement your code here
      } else {
        // Div click logic
        // Implement another code here
      }
    },
    handleButtonClick() {
      // Button click logic
      // Implement your code here
    },
  },
};
</script>

If this doesn't solve the issue, I recommend using vanilla JavaScript for this implementation.

Answer 5

Answer №3

To ensure the button does not trigger the div's click event, use @click.stop on the button and bind @click to the div element. Here is an example:

<div class="full-width" @click="handleMethod1">
  <button @click.stop="handleMethod2">Click Me</div>
</div>

Answer 6

To ensure the button does not trigger the div's click event, use @click.stop on the button and bind @click to the div element. Here is an example:

<div class="full-width" @click="handleMethod1">
  <button @click.stop="handleMethod2">Click Me</div>
</div>

Press the div, excluding the button - Vue

Answer №1

Answer №2

Answer №3

Similar questions

Get data from a JSON file using JavaScript

VueJS 3 custom Checkbox fails to update UI upon clicking

How to pause a loop temporarily before proceeding with the next iteration

When transitioning between single-page Angular applications using Protractor, a "JavaScript error: document unloaded while waiting for result" may be encountered

When the button is clicked, request the total count of elements in the array

display a dual-column list using ngFor in Angular

What is the process of embedding base64 encoded data into an image in Javascript after retrieving the data from Azure Blob Storage?

Can you provide the regular expression that will successfully match this specific string of text?

Design a button for removing the selected value in select2

Is there a way to add 100 headings to a webpage without using a loop when the page loads

Exploring the Power of Observables in Angular 2: Focusing on Targeting an Array Nested Within

Steps for refreshing Google reCAPTCHA on an AJAX-enabled webpage

Tips for looping through client.get from the Twitter API with node.js and express

Node.js offers a simple and efficient way to retrieve screen resolution. By using

Embed a function within a string literal and pass it to another component

The drop-down menu fails to appear when I move my cursor over it

Can you tell me about the feature called "Inspect Browser" box?

Angular - Clear the selection of <select><option> if I opt out of accepting the change

Type of result from a function that returns a linked promise

Leveraging the Composition API in Vue 3: Implementing reusable code from a separate file into the template