如何使單張標記僅針對點擊事件進行交互？

我想要一個標記（帶有DivIcon圖標），它不會捕獲除點擊之外的任何鼠標事件。這是可行的，以及如何實現它？如何使單張標記僅針對點擊事件進行交互？

下面是顯示問題的小提琴：https://jsfiddle.net/A1an/dcut125e/ - 當鼠標指針穿過多邊形中的文本時，地圖上的圖標應保持可見，但也應對（並捕獲）點擊事件作出反應。

也試圖與bubblingMouseEvents沒有成功：

iconLabel=L.divIcon({html:"This text blocks events"}); 
labeledMarker=L.marker([39.83711,-3.464459], {icon:iconLabel, bubblingMouseEvents:true}); 
labeledMarker.addTo(map);

任何方向也將不勝感激！

來源

2017-07-27 a1an

除了在其中一行的末尾缺少分號，您忘記將任何單擊事件處理程序添加到添加到多邊形的L.DivIcon。

您還必須使用語法new L.DivIcon，因爲這可確保您實例化新的L.DivIcon。

我已經更新了你的提琴here現在一直徘徊在L.DivIcon時表示地圖標記圖標，並附着其檢測，如果你點擊多邊形本身的DivIcon添加了兩個click事件。

來源

2017-07-28 08:56:11

魅力你添加了相同的鼠標懸停功能，這是不可以這樣做「透明」到其他鼠標事件的標籤。在我的情況下，我沒有可能將類似的函數處理程序附加到標記標籤 – a1an

事實證明，只有某些事件才能使交互標記交互，因爲它使用pointer-events css屬性來使它交互或不交互，而這又不指定哪些事件被髮出，它只是全部或全無。

可以做的是改爲在底層元素上顯式激發事件，從而使標籤的行爲就好像它不存在這樣的事件。該技巧利用隱藏標籤的技術，然後獲取鼠標座標的下一個元素，然後恢復標籤並最終在底層元素上觸發新事件。不幸的是這似乎不是在的jsfiddle工作，但就像在真正的應用程序

labeledMarker.on('mouseover',function(e) { 
      old_disp=e.target._icon.style.display; 
      e.target._icon.style.display='none'; 
      offset={top: e.originalEvent.clientY, left:e.originalEvent.clientX}; 
      underlying = document.elementFromPoint(offset.left,offset.top); 
      e.target._icon.style.display=old_disp; 
      var ev = document.createEvent('MouseEvent'); 
      ev.initEvent("mouseover",true,true); 
      ev.target = underlying; 
      underlying.dispatchEvent(ev); 
     });

來源

2017-07-28 15:16:59 a1an

如何使單張標記僅針對點擊事件進行交互？

回答

相關問題