使用d3繪制了個關系圖,在表示關系的連結上有文本說明,想通過輕按兩下文本實作檢視詳情操作,但無論對文本元素Text添加輕按兩下(dblclick)還是單擊(click)事件監聽都不能觸發。
去掉連結文本的樣式:
pointer-events: none;
首先想到的是不是因為浏覽器相容性Text不支援滑鼠事件監聽,是以就通過控制台手工添加了幾個Text驗證,驗證通過。
又懷疑是不是跟用了TextPath有關,再次驗證通過。
好久沒用過SVG了,是不是原來開發者設定了某些屬性。檢視MSDN SVG文檔發現屬性:pointer-event比較可疑
pointer-events The <code>pointer-events</code> 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.讓事件穿過它。