e.StopPropagation（）忽略重疊元素

我有一個mouseover事件，它創建了一個工具提示部分div的div，我有我的鼠標。e.StopPropagation（）忽略重疊元素

但是，如果鼠標懸停在工具提示上，它會將鼠標移出。我希望它忽略新創建的div，所以它不會觸發mouseout，除非我將鼠標移出原始div。所以我用e.stopPropagation()但它似乎沒有解決這個問題。

這是我的代碼：

function ToolTip(e,el,data) 
{ 
    e.stopPropagation(); //ignore other elements that overlap 

    var div = createDiv();  
     div.style.left = el.offsetLeft + 10 + 'px'; 
     div.style.top = el.offsetTop + 10 + 'px'; 
     div.className = 'ToolTip'; 
     div.innerHTML = 'This is a tooltip!'; 
     document.body.appendChild(div); 

     function removeToolTip() 
     { 
      el.removeEventListener('mouseout',removeToolTip,false); 
      removeDiv(div); 
     } 

    el.addEventListener('mouseout',removeToolTip,false);  
} 

div.addEventListener("mouseenter",function(e){ToolTip(e,this,data);},false);

有我誤解使用e.stopPropagation()？

我與該腳本的jsfiddle：http://jsfiddle.net/Lc7t7/

來源

2014-07-02 Sir

*「我誤解了使用e.stopPropagation（）？」*：是的。您正試圖阻止「mouseenter」事件的傳播。而且，無論如何，沒有其他的高級「鼠標」處理程序。詳細的理解，你可以參考[（this）]（http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture）和[（this） ]（http://www.w3.org/TR/DOM-Level-3-Events/#event-flow）。 – Abhitalks

所以，而不是傳播，我應該怎麼做，以防止它發生？ – Sir

據我所知，你正在試圖阻止提示從與光標互動，因爲當它是不與元素互動工具提示是爲了。你需要做的是使工具提示「不可見」到光標。停止傳播不會有幫助，因爲工具提示的父項不是工具提示元素，而是<body>元素。

令人驚訝的是，答案不是JavaScript，而是CSS。 CSS pointer-events property設置爲none時，使元素不與光標交互。 JavaScript應該尊重這一點，並忽略你已經用工具提示「剔除」了元素的事實。不幸的是，在許多瀏覽器的舊版本中瀏覽器支持是lacking，所以請記住。

來源

2014-07-03 02:22:19

該死的好回答！一直試圖完成這一整天！它非常令人驚訝，它需要一個CSS解決方案！ – Sir

它似乎也很好的支持，除了舊的IE版本，我使用的一些功能在舊IE版本中無法使用，所以它沒有任何損失。 – Sir

e.StopPropagation（）忽略重疊元素

回答

相關問題