Strategies for disabling middle mouse button default behavior in Vue

When I use

@click.middle.stop.prevent="test"
, the default scroll wheel still shows up despite it detecting the middle mouse click and calling my function. Is there a way to prevent this from happening?

Answer №1

Starting from version vue v2.6.10, the directives @click.middle and @mousedown.middle no longer conflict with each other. This is why utilizing @click.middle.stop.prevent does not successfully override the default scroll wheel action triggered by @mousedown.middle.

To address this issue, you can either use

@mousedown.middle.prevent.stop="test"
or include both @click.middle and @mousedown.middle.prevent.stop within the same element:

@click.middle="test"
@mousedown.middle.prevent.stop

Answer №2

@auxclick.stop on the element ensures that a middle click will be disabled and it won't bubble up to its parent component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Shopping Dialog with Bootstrap (nakupanda) captures form input [JSFiddle]

Having difficulty extracting data from my form. Currently utilizing the bootstrap dialog from nakupanda () The dialog (located within a fullcalendar select function) var form = $('#createEventForm').html(); BootstrapDialog.show({ mes ...

Error Message: discord.js is unable to retrieve the specified property 'find' due to it being undefined, resulting in

While working on a command for my discord bot, I encountered an error. As I am new to programming, please forgive me if it's something simple that I couldn't figure out. TypeError: Cannot read property 'find' of undefined at Object. ...

What is the process for transforming a String into an HTML element within a Next JS Application?

I stored the product description as HTML elements in a Database, but when I try to render this data into a div, it displays as a String. I am looking to showcase all the data as HTML elements in my Next JS application. I attempted using JSON.parse, but unf ...

angular2 : problem encountered with communication to rest api

Transitioning from PHP to Angular2 has been quite challenging for me, especially when trying to use a real rest API like "Tour of Heroes". I initially thought it would be simple... Currently, I have set up a functional API with Express: curl -XGET http:/ ...

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

Guide to effectively utilizing jQuery Deferred within a loop

I have been working on a function that needs to loop through a dataset, updating values as it goes along using data from an asynchronous function. It is crucial for me to know when this function finishes running the loop and completes all updates. Here is ...

Unexpected Token Error in Laravel Blade Vue

Trying to pass a variable from Blade to a Vue component prop is causing an unexpected error. The error message received states: [Vue warn]: Error compiling template: invalid expression: Invalid or unexpected token in [{"id":6,"name":"aaa","created_a ...

"Resetting count feature in AngularJS: A step-by-step guide

I have a list consisting of four items, each with its own counter. Whenever we click on an item, the count increases. I am looking to reset the counter value back to zero for all items except the one that was clicked. You can view the demonstration here. ...

Every time I attempt to insert a button from Semantic UI into my code, I consistently encounter an error message that reads: "Error: Unable to locate node on an unmounted

Struggling with a side project utilizing a MERNG stack. Can't seem to successfully add a button from semantic UI react documents into my code, sourced from here. Despite multiple attempts, encountering an error without clarity on the root cause. GitHu ...

Unraveling deeply nested array objects in JSON with Java Script/jQuery

I need help working with a JSON file that looks like the following: {[ {"name":"avc"}, {"name":"Anna"}, {"name":"Peter"}, {"Folder":[ {"name":"John"}, {"name":"Anna"}, {"Folder":[ {"name":"gg"}, ...

Why isn't my NPM package functioning properly within the Laravel framework?

I recently developed an npm package for my personal use, but encountered a ReferenceError when attempting to utilize it in a Laravel project. Here's the breakdown of what I did: I followed a tutorial on initializing an npm package, and it functioned p ...

An error popped up out of the blue while attempting to execute Webpack

Looking to deploy my React website on IIS but encountering an error when running npm run build:prod. The error message states: index.js Line 1: Unexpected reserved word. You may need an appropriate loader to handle this file type. Below is the snippet fro ...

Warning: The use of the outdated folder mapping "./" in the "exports" field for module resolution in the package located at node_modulespostcsspackage.json is deprecated

I recently upgraded my Node to version 16 and since then I have been encountering this issue while building my Angular app. Warning: The folder mapping "./" used in the "exports" field of the package located at ".../node_modules/postcss/package.json" is de ...

Leveraging Ajax for Executing a MySQL Query in PHP upon Clicking the Facebook Like Button

Is it possible to execute a MySQL query whenever a Facebook Like button is clicked on a webpage? I am aware that FB.Event.subscribe('edge.create', function(response) {} is used for such actions. However, my lack of knowledge in Javascript and AJA ...

What's causing me to encounter two canvases while implementing PIXI.js in my Next.js project?

I'm facing a challenge in my game development project that utilizes PIXI.js within a Next.js setup. Currently, I am experiencing an issue where the webpage is displaying two canvases instead of one, leading to unexpected rendering issues and impacting ...

Surprising outcomes arise when the results of Three.js EffectComposers are combined, as the Additive and Subtractive effects interact in unexpected

While working on postprocessing in Three.js with EffectComposers and shader passes, I encountered some unexpected behavior when combining the WebGLRenderTargets (renderTarget2) from different composers. My setup involves five composers: three to render sce ...

Trouble arises when attempting to delete rows from my database with the use of HTML, PHP, and

I am developing an application where I have implemented this table: <?php require_once 'Connect2db3.php'; ?> <form> <fieldset> <article class="rondehoeken"> <header> <div class="streep1"></div& ...

Using Jest to mock React components with dot notation

I am facing a challenge with a component that dynamically renders either a main component or a loading component based on the data being loaded: // components/example import Component from 'components/component'; const Example = ({loaded}) =&g ...

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

Hello there! I'm currently working on creating a status bar where I can add an image after another image. Let me explain my idea clearly. So, I have two images in GIF format: one is white and 10x10px, and the other one is black and also 10x10px. On ...

The checkbox in element-plus does not revert to being unchecked if it was initially checked

Currently, I have a checkbox implemented using element-plus: <el-checkbox v-model="slotProps.action.check_control" :checked="slotProps.action.check_control" size="large" class="ml-4" :id="slotProps. ...