Removing the mousedown event from elements within a child component: tips and tricks

Two components are involved: DashboardView and DashboardOrderCard. My goal is to prevent the mousedown event from being emitted when either the date picker is clicked or an option is selected from the DashboardOrderCard. How can I accomplish this? Below is the code for both components.

DashboardView.vue 
<div 
    class="dashboard-view"
    v-bind="$attrs"
>
    <div class="pinned-orders">
        <DashboardOrderCard 
            v-for="(order, index) in pinnedOrders"
            :key="order.id"
            :id="'order-' + order.id"
            :order="order"
            @mousedown="displayProgress(order)"
            @unpin-order="unpinOrder(index)"
        />
    </div>
</div>

DashboardOrderCard.vue
<el-card>
    <div class="body-wrapper">
        <div class="due-date-wrapper">
            <el-date-picker 
                class="date-picker"
                v-model="currentDueDate" 
                format="DD-MM-YYYY"
                :readonly="isCurrentUserSupervisor === false"
            />
        </div>
            <OrderStatusSelect 
                class="status-select"
                v-model:status="currentStatus"
            />
    </div>
</el-card>

I am utilizing Vue3 with <script setup> and Typescript.

typescriptvue.js

Answer №1

Here's a simple example using jQuery:

<a href="#a">
   hello <span> click here </span>
</a>
        
 $("a span").click(function(e){
    e.stopPropagation();
    // parent's event handler doesn't run
  });
    
  $("a").click(function(e){
   alert("anchor click")
  });

Additionally,

    <el-date-picker
        @mousedown="myStopPropagationFunction" 
        class="date-picker"
        v-model="currentDueDate" 
        format="DD-MM-YYYY"
        :readonly="isCurrentUserSupervisor === false"
                      
     />
// or wrap it in a div and define mousedown event on div, if doesn't support

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

Is it possible to define TypeScript interfaces in a separate file and utilize them without the need for importing?

Currently, I find myself either declaring interfaces directly where I use them or importing them like import {ISomeInterface} from './somePlace'. Is there a way to centralize interface declarations in files like something.interface.ts and use the ...

typescript

Tips for updating VUE's main.js file to incorporate the routers/index.js configuration

What is the reason for the difference in syntax between the VUE UI main.js code generated by CLI/3 and the older version, and how does it function? What are the various components of the new syntax and how do they work? sync(store, router) // for vuex-rou ...

javascriptvue.jsecmascript-6vuexvue-cli-3

"Encountering a module not found issue while trying to

Attempting to test out 3 node modules locally by updating their source locations in the package.json files. The modules in question are sdk, ng-widget-lib, and frontend. ng-widget-lib relies on sdk, while frontend depends on ng-widget-lib. To locally build ...

node.jsangulartypescriptnpm

Troubleshooting type conflicts while utilizing the 'withRouter' function in Typescript

Currently, I am delving deeper into React and TypeScript, seeking to expand my understanding and practical experience. While utilizing withRouter from react-router-dom, I encountered a typing error. The issue arose within my simplistic code snippet. I att ...

typescriptreact-routerreact-router-dom

Designing an architecture with Rails API and VueJS server layout

Currently, I am working on a Rails API only app for the backend, along with two VueJS apps serving as the front ends. These Vuejs apps are making multiple calls to the Rails API. As I contemplate deploying my project to Digital Ocean, one question arises: ...

ruby-on-railsvue.jsserverdigital-ocean

Is it possible to use a TypeScript Angular (click) event with an object property as the value?

Seeking assistance in creating a dynamic error card featuring various error messages along with a retry button. Below is a snippet from my TypeScript object: errorCard: any = []; if(error) { this.errorCard.errorMessage = "Oops, please try again"; ...

htmlangulartypescript

Rendering illuminated component with continuous asynchronous updates

My task involves displaying a list of items using lit components. Each item in the list consists of a known name and an asynchronously fetched value. Situation Overview: A generic component named simple-list is required to render any pairs of name and va ...

javascripttypescriptasync-awaitlit

Exploring the implementation of Generic types within a function's body

When trying to encapsulate logic inside the OrderGuard component (which can handle two types of orders: CheckinOrder or Checkout order), I encounter an issue when passing the order to the orderLoad callback in TypeScript. The error message states that "Ch ...

reactjstypescripttypescript-genericstypescript3.0

Refresh the mapbox source features in real-time

Currently, I am mapping out orders on a map with layers and symbols that have different statuses. When the status of an order changes, I want to update the color of the symbol accordingly. The layer configuration looks like this: map.addLayer({ id: &q ...

javascriptreactjstypescriptmapboxmapbox-gl-js

Using TypeScript with React - employing useReducer with an Array of Objects defined in an Interface

After implementing the given component, I encountered an error related to my useReducer function. The specific error message states: "No overload matches this call..." and provides details on how the parameters are not compatible. import React, {useReducer ...

reactjstypescripttypesreact-hooksuse-reducer

Managing a project with multiple tsconfig.json files: Best practices and strategies

I've got a project structured in the following way: \ |- built |- src |- perf |- tsconfig.json |- typings |- tsconfig.json My main tsconfig.json looks like this: "target": "es6", "outDir": "built", "rootDir": "./src", Now, I need to have a ...

typescripttsconfig

Using Vue slots in a loop to create a unique slider component

I'm struggling to figure out how to utilize slots for a SliderA component. The structure of SliderA component is as follows, with slides being an array prop. <template> <div class="slider-container" ref="container"> ...

vue.jsvuejs3slots

Difficulty capturing emitted events from child components in Vue.js2

Currently, I'm working on developing a Bootstrap tabs component using Vuejs. The tabs component is divided into two parts - the parent tabs-list component that contains multiple tab-list-item components. Take a look at the code for both these componen ...

javascriptvue.jsvuejs2

Transfer information from a Vue function to an external JSON document

I would like to store the data for my Vue project in an external JSON file instead of within the Vue function itself. I attempted to retrieve data from an external file using the code below, but encountered issues, possibly due to a conflict with the "ite ...

javascriptjsonvue.jsvuejs2

Personalized path-finding tree iterator

I am trying to implement a custom iterator in JavaScript that can traverse a DOM tree based on specific criteria provided by a callback function. The goal is to return an array of the nodes that match the criteria as the generator iterates through the tree ...

javascripttypescriptiteratorgenerator

In the CallableFunction.call method, the keyword "extends keyof" is transformed into "never"

In the following method, the type of the second parameter (loadingName) is determined by the key of the first parameter. (alias) function withLoading<T, P extends keyof T>(this: T, loadingName: P, before: () => Promise<any>): Promise<void ...

typescripttypescript-generics

Is it possible to import in TypeScript using only the declaration statement?

Is there a way to use a node module in TypeScript without explicitly importing it after compilation? For example: I have a global variable declared in a file named intellisense.ts where I have: import * as fs from 'fs'; Then in another file, ...

typescriptimportintellisensedeclarationvisual-studio-code

In Angular 2+, what is the comparable counterpart to Vue's Vuex?

I have experience with Vue's Vuex, but I am currently working on an Angular application. I would like to implement a similar principle where all components are managed from one central location (like a store in Vue). Is there an alternative to Vuex in ...

angularvue.jsvuejs2vuex

Learning how to merge two observable streams in Angular2 by utilizing RxJS and the powerful .flatMap method

Within my Angular2 app, I have created an Observable in a Service called ContentService. Here is a simplified version of the code: @Injectable() export class ContentService { constructor(private http:Http, private apiService:ApiService) { th ...

typescriptangularrxjs

Tips for handling mismatched function parameters in TypeScript when using an unspecified data type

Even though I wish it wasn't the case, TypeScript accepts the code below in strict mode. The function's value argument is defined as either an unknown or an any type, meaning it can be anything at this point as it is being passed along. However, ...

typescript