Javascript 有没有办法在React on mobile中的'legend'HTML元素上使用onClick？

我试图为搜索创建一个可扩展的

字段集

。

onClick

应该触发从true到false的状态更改，从而更改div上的类

在桌面上，此

onClick

在

legend

标签上运行时不会出现问题。在iOS（firefox和safari）上，

onClick

不会在此元素上触发，但

onClick

会在移动应用程序中的其他无关元素上触发

import React，{useState}来自“React”；
导出默认函数月份（）{
const[expanded，setExpanded]=useState（false）；
让类=[“列”，展开？“显示”：“隐藏”]；
返回(
setExpanded（！expanded）}>
单击以按年度时间进行搜索
一月
//多月
十二月
);
}

我尝试将

cursor:pointer

添加到元素的css中，使用

onPointerDown

和

onTouchStart

，并创建一个eventHandler函数来监视对元素的单击。我还尝试在

图例

中添加移动友好的可点击标签，如

a

和

按钮

。在图例周围放置类似于

div

或

a

的标记会破坏图例

//不起作用
setExpanded（！expanded）}>
单击以按时间搜索，默认情况下它全年搜索
//打破了传说
setExpanded（！expanded）}>
单击以按时间搜索，默认情况下它全年搜索

将click事件移到字段集之外是可行的，但这会使页面更难看

//有效
setExpanded（！expanded）}>TEST
单击以按时间搜索，默认情况下它全年搜索

---

因此，

图例

似乎阻止任何子标记被

onClick

-able。有没有一种方法可以迫使这一点起作用或改变？我知道

legend

已经过时了，但就我所做的而言，我喜欢它的外观。

其他一些不可见元素可能会以较小的分辨率与目标元素重叠。我不太了解如何在手机上调试，但我不认为这是正在发生的事情。我只是注释掉了所有的内容，除了这个字段集，我得到了相同的结果。