给文本注册单击事件不起作用问题记录

问题描述:

使用d3绘制了个关系图,在表示关系的链接上有文本说明,想通过双击文本实现查看详情操作,但无论对文本元素Text添加双击(dblclick)还是单击(click)事件监听都不能触发。

给文本注册单击事件不起作用问题记录

解决方法:

去掉链接文本的样式:


pointer-events: none;

给文本注册单击事件不起作用问题记录

解决过程:

首先想到的是不是因为浏览器兼容性Text不支持鼠标事件监听,所以就通过控制台手工添加了几个Text验证,验证通过。

又怀疑是不是跟用了TextPath有关,再次验证通过。

好久没用过SVG了,是不是原来开发者设置了某些属性。查看MSDN SVG文档发现属性:pointer-event比较可疑

pointer-events

The pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.

查看JS源码是否设置了此属性,没有找到.

通过浏览器开发者工具查看链接文本Text使用的css样式。终于找到了。

去掉样式后可以正常点击。


扩展:

有时候一个图形的上面需要显示一段文本说明,当点击文本的时候我们希望触发图形的点击事件而不是文本的。这个时候就可以对文本使用pointer-events:none.让事件穿过它。


上一篇:C. Random Events(思维)


下一篇:随手记