не в состоянии стрелять нажмите, MouseDown, MouseUp события в то же самое время на ГСВ в светлячок

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'); 
} 

Что мне нужно сделать, это на svg tag «mousedown» событие, я хотел скрыть тег svg use, который имеет id как «btn-active» и показывает другой тег использования, имеющий идентификатор «btn-arrow-down» и событие события «mouseup». действие. здесь просто изменилось изображение svg на mousedown.

также необходимо активировать событие click, поскольку моя функциональность находится в функции увеличения. , но он не работает в Firefix.

но в firefox запускаются только события mousedown и mouseup, и приращение не выполняется, поскольку событие клика не может быть выполнено из-за изменения html в теге svg.

его рабочий тон в Chrome. может кто-нибудь, пожалуйста, проведет меня через это, спасибо заранее.

Answer 1

вы можете задать правило CSS "указатель событий: ни один"

как ниже

use{ 
    pointer-events:none; 
    }