What is the best way to eliminate mouse click release events?

Encountering an issue with my Vue/Vuetify Dialog that closes when clicking outside of it as expected.

The problem arises when there is a text field inside the dialog. If I accidentally select the content and release the mouse outside of the dialog, it also triggers the closing action. This could potentially confuse many users.

Here's a brief gif highlighting the problem:

I implemented a click:outside handler and upon logging the event, this data was captured:

(Event Data Here)

In summary, it seems to be registering as a "click" event even though it's triggered by a mouse release rather than an actual click. Is there a way to differentiate this particular event?

Appreciate any assistance provided :)

javascriptvue.jseventsdom-eventsvuetify.js

Answer №1

To add this feature, manage the mouseenter, mousedown, and mouseup events in the container you're utilizing (most likely a v-card) within your <v-dialog:

Create the noClickAnimation attribute to maintain a dynamic reference.

Connect the mouse events to the container element:

<v-card ... 
  @mouseenter="noClickAnimation = false" 
  @mousedown="noClickAnimation = true" 
  @mouseup="noClickAnimation = false"

Include the 

:persistent="noClickAnimation"
in your dialog settings.

When you click, move out, and release the mouse button, the dialog won't close. The @mouseenter event resets everything so users can still close it by clicking outside as usual.

For a demonstration of this function, check out this codepen.io link.

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

AngularJS promise fails to resolve when attempting to read a file using the FileReader

Can someone assist me with a function I am trying to create in my service? I want the function to use FileReader to read a small image file and return the result in a promise to my controller. The issue is that while the file reaches the service without an ...

javascriptangularjspromise

The onPlayerReady function in the YouTube API seems to be experiencing a delay and

After following a tutorial on integrating the YouTube API into my website, I encountered difficulties trying to play a YouTube video in fullscreen mode when a button is pressed. Despite following the provided code closely, I am unable to get it to work as ...

javascriptjqueryruby-on-railsyoutubeslim-lang

Initiate an AJAX request within an existing AJAX request

On one of my pages, page A, I have a form that passes parameters to a script using AJAX. The results are loaded into div B on the same page. This setup is functioning properly. Now, I want to add another form in div B that will pass parameters to a differe ...

javascriptphpjqueryajax

Does PHP/AJAX only function when an output is generated?

I am attempting to fetch the Wordpress blog header into a php file in order to use it for an AJAX call function. define('WP_USE_THEMES',false); echo 'Something'; require(explode("wp-content",realpath(dirname(__FILE__)))[0].'wp-b ...

javascriptphpajaxwordpress

How to use getBoundingClientRect in React Odometer with React Visibility Sensor?

I need help troubleshooting an error I'm encountering while trying to implement react-odometer js with react-visibility-sensor in next js. Can anyone provide guidance on how to resolve this issue? Here is the code snippet causing the problem: https:/ ...

javascriptreactjsnext.jsfrontendodometer

How to insert space after every item generated by ng-repeat in AngularJS

I'm looking to evenly distribute elements based on this inquiry How to distribute li elements equally? I am utilizing angular with jade: ul li(ng-repeat="item in items") {{item.name}} However, ng-repeat does not create newlines after each element ...

javascripthtmlangularjs

Top method for developing a Wizard element within React

As I delved into learning React, my focus shifted towards creating a Wizard component. My initial vision was to use it in this way: <Wizard isVisible={this.state.isWizardVisible}> <Page1 /> <Page2 /> </Wizard> However, I e ...

javascriptreactjs

Building an integrated Monaco editor using Electron and AngularJS

Struggling to integrate the Monaco editor into my Electron app. Despite following electron examples, encountering persistent errors in my application. The errors I'm facing include: "loader.js:1817 Uncaught Error: Unrecognized require call" "angula ...

javascriptangularjselectronmonaco-editor

Disabling eventListener upon the occurrence of another event is ineffective

I am having trouble with two functions in my app that create different HTML structures. I want to close the info button event when the menu_div button is clicked, and vice versa. Can anyone provide some help? const menu_div = document.createElement("butt ...

javascriptevents

Choose a drop-down menu with a div element to be clicked on using Puppeteer

Issue Description: Currently encountering a problem with a dropdown created using material select. The dropdown is populated through an API, and when selected, ul > li's are also populated in the DOM. Approaches Tried: An attempt was made to res ...

javascriptreactjsmaterial-uipuppeteer

Angular 2: Executing a function after ngFor has completed

Within Angular 1, I crafted a personalized directive called "repeater-ready" to pair with ng-repeat for triggering a callback method upon completion of an iteration: if ($scope.$last === true) { $timeout(() => { $scope.$parent.$parent.$ ...

javascriptangularjsangularngfor

When validating with Sequelize, an error occurred due to one or more columns being undefined:

Hello everyone, I'm facing some issues. Can anyone explain why this.day_number and this.teacher_id are coming up as undefined? 'use strict' module.exports = (sequelize, DataTypes) => { const Teacher = sequelize.models.teachers ...

javascriptnode.jsexpresssequelize.js

"Partially loaded" when document is ready

Is there a way for me to trigger a function once the element identified by #container has finished loading in the DOM? Instead of waiting for the entire DOM to load using document.ready(), I'd like to start populating #container right after it's ...

javascriptjquery

Executing two Ajax calls sequentially without using asynchronous functionality

Creating a dynamic menu using two REST APIs to establish a parent/child relationship. The ID of the parent from the first API response is passed to the child API to fetch child records. Encountering issues where setting async false for the child API call ...

javascriptjqueryajax

The HTML content retrieved through an ajax service call may appear distorted momentarily until the JavaScript and CSS styles are fully applied

When making a service call using ajax and loading an HTML content on my page, the content includes text, external script calls, and CSS. However, upon loading, the HTML appears distorted for a few seconds before the JS and CSS are applied. Is there a sol ...

javascriptjqueryhtmlcssajax

Tips for splitting lengthy text into multiple lines in Vue

Vue is being used to display a line which appears lengthy when displayed in one line. I'm interested in splitting this long line into multiple lines automatically. Can someone guide me on how this can be achieved? <span class="text-xs"> ...

vue.jstext

What is the best way to store images in a directory using JavaScript and ASP.NET?

How can I upload and save an image in a folder using ASP.NET, then call and display it? Is it possible to achieve this using AJAX, jQuery, or JavaScript with Web Method? <asp:FileUpload CssClass="image" ID="fileUpload" runat="server" /> I currently ...

javascriptc#jqueryajaxweb-services

Which is better for toggling between images/icons: a switch statement or a ternary operator?

I have a unique challenge where I am dealing with a dynamic list of thumbnails. Some of the items in this list are images, while others need to be represented by icons. My goal is to display either an image or an icon based on the contentType of each item. ...

javascriptreactjsmaterial-ui

Has Chrome's console disappeared?

After reinstalling Chrome and opening the dev tools with F12, I encountered an error with the following code: console.debug('test'); The error message displayed was Uncaught ReferenceError: console is not defined(…) This issue persisted acro ...

javascriptgoogle-chrome

Limit the input to numbers when pasting into Angular

Implementing a directive in <input type='text'> to restrict user input to numbers has been successful! The issue arises when a user copies and pastes a string, causing Angular to accept the value and send it to the backend. angular.module ...

javascriptangularjsangularjs-directive