Utilizing vue.js 3 to implement dual @click events on a single HTML element

Question

Utilizing vue.js 3 to implement dual @click events on a single HTML element

I need to assign 2 mouse click events to a div element. One should be triggered by holding down the shift key while clicking, and the other by a regular click, like this:

<div @click.shift="aaa()" @click="bbb()">...</div>

The issue I'm facing is that when I shift+click on the div, both aaa() and bbb() functions are executed. I have tried using modifiers like @click.shift.stop but it didn't prevent bbb() from being called every time I clicked on the div. Is there a way to resolve this without combining the two types of click events into a single function, for example ccc(), which would then call either aaa() or bbb()?

javascript vue.js events

Answer 1

Answer №1

The key you need to use is the "exact" modifier.

<div @click.shift="aaa()" @click.exact="bbb()">...</div>

https://vuejs.org/guide/essentials/event-handling.html#exact-modifier

The .exact modifier allows for precise control over the specific combination of system modifiers required to trigger an event.

Therefore, this click event will only be triggered if no modifier is used, preventing it from executing when the @click.shift is activated. Keep in mind that this also blocks alt+click, ctrl+click, etc.

Answer 2

The key you need to use is the "exact" modifier.

<div @click.shift="aaa()" @click.exact="bbb()">...</div>

https://vuejs.org/guide/essentials/event-handling.html#exact-modifier

The .exact modifier allows for precise control over the specific combination of system modifiers required to trigger an event.

Therefore, this click event will only be triggered if no modifier is used, preventing it from executing when the @click.shift is activated. Keep in mind that this also blocks alt+click, ctrl+click, etc.

Answer 3

Answer №2

To achieve this, you can create a single click handler that will dispatch the event as needed.

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      console.log('Click event handled!');
    },
    handleEvent(event) {
      if (!event.shiftKey) {
        console.log('Handle event executed!');
      } else {
        this.handleClick();
      }
    }
  }
})

div {
  background-color: green;
  padding: 20px;
}

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

<div id="app">
  <div @click="handleEvent($event)">Click me!</div>
</div>

Answer 4

To achieve this, you can create a single click handler that will dispatch the event as needed.

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      console.log('Click event handled!');
    },
    handleEvent(event) {
      if (!event.shiftKey) {
        console.log('Handle event executed!');
      } else {
        this.handleClick();
      }
    }
  }
})

div {
  background-color: green;
  padding: 20px;
}

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

<div id="app">
  <div @click="handleEvent($event)">Click me!</div>
</div>

Answer 5

Answer №3

new Vue({
  el: '#app',
  methods: {
    aaa() {
      console.log('aaa() executed!');
    },
    bbb(event) {
      if (!event.shiftKey) {
        console.log('bbb() executed!');
      }
    }
  }
})

      div {

        background-color: green;
        padding: 20px;

      }

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

    <div id="app">
      <div @click.shift="aaa()" @click="bbb($event)">Click me!</div>
    </div>

I trust this solution aids you!

Answer 6

new Vue({
  el: '#app',
  methods: {
    aaa() {
      console.log('aaa() executed!');
    },
    bbb(event) {
      if (!event.shiftKey) {
        console.log('bbb() executed!');
      }
    }
  }
})

      div {

        background-color: green;
        padding: 20px;

      }

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

    <div id="app">
      <div @click.shift="aaa()" @click="bbb($event)">Click me!</div>
    </div>

I trust this solution aids you!

Utilizing vue.js 3 to implement dual @click events on a single HTML element

Answer №1

Answer №2

Answer №3

Similar questions

Instantly display selected image

Using Firebase with Vue.js

Executing unique calculations on Kendo UI Grid Columns

The issue of slides overlapping in a Javascript slideshow during auto play mode

Achieving a sticky scrollbar effect in CSS/JavaScript for scrolling within nested divs

Refining to Showcase One Menu Selection

The tension settings in Chart.JS appear unusual

Innovative application transforms rigid input with dynamic hyphens

Incorporating external libraries is seamless when used in a .html document, however, they may encounter limitations when integrated

How can I effectively display personalized information from an MSAccess database on a WordPress website?

"Learn the technique of displaying or concealing a row in a ListView with the help of

Encountering an npm Error while setting up a new Vue project with Vue-CLI

Modifying Stroke color in HTML5 Canvas

Tips for consolidating all functions into a single file for ReactJS inheritance:

How do you incorporate ScrollTop animations using @angular/animations?

Creating personalized columns in a BootstrapVue table

Including input within a component causes the input to capture all click events

Reload entire page for AJAX request if JavaScript is not enabled

Accessing information from a database table using Highchart and Ruby on Rails (ROR

Input specific ng-if conditions