我正在尝试将一个onClick事件添加到现有的svg中。目前我有这个:
<g id="Group" onClick={this.clickGroup.bind(this, 1)}>
这有点有效,但并不完全有效...当我单击组时,事件会触发,但可点击的“区域”与我想要点击的组不同(在我看来似乎完全是随机的)。
有没有更好的方法来为<g>
元素添加事件(使用React?)?
我正在尝试将一个onClick事件添加到现有的svg中。目前我有这个:
<g id="Group" onClick={this.clickGroup.bind(this, 1)}>
这有点有效,但并不完全有效...当我单击组时,事件会触发,但可点击的“区域”与我想要点击的组不同(在我看来似乎完全是随机的)。
有没有更好的方法来为<g>
元素添加事件(使用React?)?
使用样式 pointer-events: bounding-box,使组在任何位置都可点击。即使在空白处也可以。
<g id="Group" onClick={this.clickGroup.bind(this, 1)} style="pointer-events: bounding-box;">
一个 g
元素只是一个空的容器,它本身不能触发事件。
如果你运行这个例子,你会发现你可以通过点击 g
元素的子元素来触发 click
事件,但如果你在它们之间的空白区域点击,则无法触发。
你必须使用实际的形状来触发 SVG 中的事件。
<g>
是一个空容器,因此如果您不使用其他元素填充该容器,则无法从中触发事件。 - Clafouti
g
元素在其祖先之一上的onClick
处理程序实际成为目标。这个答案是突破口。 - Izhaki