not able to fire click ,mousedown, mouseup events at same time on svg in firefox

Question

app.component.html

<svg  id="btn-add-start-hour" 
 #start  (click)="increment($event,start.id,'startTimeHour','increment')"
(mousedown)="clickActive(start.id)" (mouseup)="clickInactive(start.id)">

  <use xlink:href="assets/svgs/btn-add-active.svg#btn-add-active"  id="btn-active" class=" btn-add-active"/>
  <use xlink:href="assets/svgs/btn-arrow-up-down.svg#btn-arrow-up-down"  id="btn-arrow-down" class="btn-arrow-up-down displaynone"/>

</svg>

app.component.ts

clickActive(btnID: string) {
    console.log('click Active',btnID);
    jQuery('#' + btnID).find('#btn-active').addClass('displaynone');
    jQuery('#' + btnID).find('#btn-arrow-down').removeClass('displaynone');
}
clickInactive(btnID: string) {
    console.log('click InActive',btnID);
    jQuery('#' + btnID).find('#btn-active').removeClass('displaynone');
    jQuery('#' + btnID).find('#btn-arrow-down').addClass('displaynone');
}
increment(event: Event,eventId: string, target: string, operation: string) {
    console.log('click increment decre');
}

What i need to do is on svg tag 'mousedown' event,i wanted to hide svg use tag which having id as 'btn-active' and show another use tag having id 'btn-arrow-down' and on 'mouseup' event event i am reversing the above action. here just changing the svg image on mousedown.

also need to fire click event as my functionality resides in increment function. but its not working in Firefix.

but In firefox, only mousedown and mouseup events are firing, and increment is not executing as click event unable to fire due to html change in svg tag.

its working fine in Chrome. can anyone please guide me through this, Thanks in advance.

Answer 1

you can set the css rule "pointer-events: none"

like below

use{
    pointer-events:none;
   }