是否可以使游標不與JavaScript行交互？

Question

我用d3建立了一個圖形。 當光標移到圖形的頂部線條時，鼠標不會與該線條交互，但底部的情況並非如此。 當我在底行上滾動時，光標會發生變化，這意味着您無法與焦點矩形進行交互。 無論如何，它使光標不會意識到它越過了像圖形頂部這樣的直線？

這是圖形： http : //jsbin.com/obAzUNa/9/edit

謝謝。

Answer 1

嘗試在您的CSS：

path {
  pointer-events: none;
}

編輯：好的，有人不喜歡這個答案。 :-(我快速瀏覽了jsbin並在path上設置了指針事件似乎完全符合要求。也許解決方案太廣泛了。

從第二個角度看，該示例似乎可以正常工作。 但是，當您經過路徑時，光標會有一點閃爍。 也許是特定於瀏覽器的-不知道。

但是讓我們使其更具體地針對主題路徑

http://jsbin.com/EjINUNI/1/

.topic path {
  pointer-events: none;
}

筆刷仍然起作用，並且沒有光標閃爍或可見的干擾。

另一種可能性是在源順序中稍后渲染筆刷，以使路徑優先，筆刷位於頂部。

Answer 2

包含路徑的<g>元素（帶有class = topic）在DOM中比在其上設置畫筆事件的<g>出現得晚。 這將導致路徑位於畫筆<g>頂部，因此它們首先拾取指針事件，從而導致指針圖標發生更改。

如果您插入“主題”路徑，以使它們顯示在DOM中，則在畫筆矩形之前，則不會發生。 為所有主題創建單獨的<g>可能是最簡單的，因此您只需要擔心該元素的位置。