无法在 firefox 中的 svg 上同时触发点击、鼠标按下、鼠标按下事件

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 标签 'mousedown' 事件上，我想隐藏 ID 为 'btn-active' 的 svg 使用标签并显示另一个 ID 为 'btn-arrow-down' 的使用标签和在 'mouseup' 事件事件中，我正在撤销上述操作。这里只是更改 mousedown 上的 svg 图像。

还需要触发点击事件，因为我的功能驻留在增量函数中。但它在 Firefix 中不起作用。

但是在 firefox 中，只有 mousedown 和 mouseup 事件被触发，并且由于 html svg 标签发生变化而无法触发 click 事件，因此 increment 没有执行。

它在 Chrome 中运行良好。谁能指导我解决这个问题，在此先感谢。

Answer 1

您可以设置css规则"pointer-events: none"

喜欢下面

use{
    pointer-events:none;
   }

无法在 firefox 中的 svg 上同时触发点击、鼠标按下、鼠标按下事件

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

jquery

svg

click

mousedown

mouseup