天天看點

給文本注冊單擊事件不起作用問題記錄

使用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.讓事件穿過它。