title: How to remove mousedown event from elements of child component?
body: <p>I have 2 components: DashboardView and DashboardOrderCard. What I'm trying to do is when I click on the date picker or select from the DashboardOrderCard not to emit the mousedown event. How can I achieve this? Below is the code for the two components.</p>
  <pre><code>DashboardView.vue 
  &lt;div 
      class=&quot;dashboard-view&quot;
      v-bind=&quot;$attrs&quot;
  &gt;
      &lt;div class=&quot;pinned-orders&quot;&gt;
          &lt;DashboardOrderCard 
              v-for=&quot;(order, index) in pinnedOrders&quot;
              :key=&quot;order.id&quot;
              :id=&quot;'order-' + order.id&quot;
              :order=&quot;order&quot;
              @mousedown=&quot;displayProgress(order)&quot;
              @unpin-order=&quot;unpinOrder(index)&quot;
          /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>DashboardOrderCard.vue
  &lt;el-card&gt;
      &lt;div class=&quot;body-wrapper&quot;&gt;
          &lt;div class=&quot;due-date-wrapper&quot;&gt;
              &lt;el-date-picker 
                  class=&quot;date-picker&quot;
                  v-model=&quot;currentDueDate&quot; 
                  format=&quot;DD-MM-YYYY&quot;
                  :readonly=&quot;isCurrentUserSupervisor === false&quot;
              /&gt;
          &lt;/div&gt;
              &lt;OrderStatusSelect 
                  class=&quot;status-select&quot;
                  v-model:status=&quot;currentStatus&quot;
              /&gt;
      &lt;/div&gt;
  &lt;/el-card&gt;
  </code></pre>
  <p>I am using Vue3 with <code>&lt;script setup&gt;</code> and Typescript.</p>