如何使Internet Explorer模擬指針事件：無？

我正在通過在圖表上顯示漸變PNG來增強高圖。我們正在使用CSS pointer-events:none;來允許用戶與圖表進行交互，儘管頂部有一個div。 IE不識別pointer-events:none;，因此IE上的用戶不能具有增強的圖表設計，或不能與圖表交互。我正在尋找一種方法讓IE瀏覽器允許鼠標事件（特定的懸停事件）通過div傳遞給它下面的元素。如何使Internet Explorer模擬指針事件：無？

你可以看到我們與在這裏工作的典範：http://jsfiddle.net/PFKEM/2/

有沒有辦法讓IE瀏覽器做類似的東西pointer events:none;，其中鼠標事件通過一個元素的元素打擊他們？

來源

2012-02-21 Code Junkie

希望這有助於:)

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

您也可以嘗試一個JavaScript解決方案：

http://jsbin.com/uhuto

來源

2012-02-21 21:13:45 dav

您的第二個鏈接（JavaScript解決方案）不再有效。它需要註冊帳戶。錯誤：此垃圾箱是匿名創建的，其免費預覽時間已過期。 – Mai 2015-02-25 17:41:17

'ERR_CONNECTION_TIMED_OUT'這就是爲什麼你永遠不會把不屬於Stackoverflow的鏈接作爲答案。 *不錯的工作*從我這裏，你有一個downvote，因爲我現在看不到*真正的*答案。 – Fusseldieb 2017-10-25 16:10:28

就花了兩天時間研究這一個項目IE10（IE10沒有按」 t支持指針事件：無CSS屬性，MS投票撤回規範，因爲可能的點擊劫持問題）。解決方法是在SVG中設置INLINED SVG標記並設置指針事件。我一直試圖使用例如一個帶有SVG src的IMG標籤，或者一個帶背景圖像的DIV設置爲一個SVG文件（我會使用pointer-events =「none」），甚至是SVG data-uris，但是我沒有想到有它在一個單獨的元素中精確地需要未實現的指針事件CSS屬性。

所以你需要一個最基本的SVG是這樣的：首先，一些CSS如：

.squareBottomRight { 
     width: 50px; 
     height: 50px; 
     position: absolute; 
     bottom: 0; 
     right: 0; 
    }

然後在HTML：

<svg class="squareBottomRight" xmlns="http://www.w3.org/2000/svg" 
     pointer-events="none"> 
     <rect id="test2_rect" x="0" y="0" width="50" height="50" fill="blue"/> 
    </svg>

參考：https://bug-45467-attachments.webkit.org/attachment.cgi?id=67050

來源

2012-05-21 21:29:46 obiuquido144

svg不適用於HTML4 – kailash19 2012-10-24 17:12:39

中的Internet Explorer識別指針事件：無，但僅適用於SVG元素，因爲指針事件僅在W3C中爲SVG元素指定規範（http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty）。

你可以用這樣的嘗試...

CSS：

#tryToClickMe{ 

     pointer-events: none; 
     width: 400px; 
     height: 400px; 
     background-color: red; 
    }

HTML：

<svg id="tryToClickMe"></svg>

這個工作在IE9和IE10（我測試它）。如果您還沒有使用SVG元素，那麼可以將現有元素包裝到SVG中。 jQuery庫提供了一個包裝方法（http://api.jquery.com/wrap/）。

有一篇非常不錯的德文文章，詳細介紹了指針事件屬性的特徵：http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - 您會發現（在Google Translate的幫助下）更多信息。

希望我能幫助

尼

附：如果要訪問覆蓋和底層對象，則可以在IE（http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx）中使用document.msElementsFromPoint方法中的。它會給你一個數組中給定點的所有圖層。

來源

2012-06-10 10:41:10

您是否在IE9中使用它？它不適合我。我在IE9中嘗試過http://jsfiddle.net/AGVTM/，並且指針事件不會轉發到藍色矩形重疊的紅色矩形。小提琴取自http：// stackoverflow。com/questions/13972730/svg-not-recognizing-pointer-eventsnone – 2013-06-18 17:22:22

這裏是另一種解決方案是很容易與5行代碼來實現：

捕獲的「鼠標按下」事件的頂級元素（要關閉指針事件的元素）。
在'mousedown'隱藏頂部元素。
使用'document.elementFromPoint（）'來獲取底層元素。
取消隱藏頂部元素。
執行底層元素的所需事件。

實施例：

 //This is an IE fix because pointer-events does not work in IE 
     $(document).on('mousedown', '.TopElement', function (e) { 

      $(this).hide(); 
      var BottomElement = document.elementFromPoint(e.clientX, e.clientY); 
      $(this).show(); 
      $(BottomElement).mousedown(); //Manually fire the event for desired underlying element 

      return false; 

     });

來源

2013-07-31 18:36:19 MarzSocks

如果有人在實際實施此解決方案（經過一些修復）後才能點擊並觸發底層選擇元素 – Calvin 2014-05-14 06:12:09

$.fn.passThrough = function (target) { 
    var $target = $(target); 
    return this.each(function() { 
     var style = this.style; 
     if ('pointerEvents' in style) { 
      style.pointerEvents = style.userSelect = style.touchCallout = 'none'; 
     } else { 
      $(this).on('click tap mousedown mouseup mouseenter mouseleave', function (e) { 
       $target.each(function() { 
        var rect = this.getBoundingClientRect(); 
        if (e.pageX > rect.left && e.pageX < rect.right && 
         e.pageY > rect.top && e.pageY < rect.bottom) 
         $(this).trigger(e.type); 
       }); 
      }); 
     } 
    }); 
};

http://jsfiddle.net/yckart/BQw4U/

$('.overlay').passThrough('.box'); 
$('.box').click(function(){ 
    $(this).toggleClass('active'); 
});

來源

2013-10-23 10:00:20 yckart

，他應該將getBoundincClientRect替換爲jquery的position（），因爲cilentRect會根據實際視口計算座標，而不是頁面上的元素位置。另一個錯誤是，即DOES定義了pointerEvents，但它們不適用於非svgs;所以styleEvents中的'pointerEvents'將返回true，即使它們不會真正起作用。此外，這具有某種限制功能。我已經嘗試過在簡單的divs上做 - 好吧，但更復雜的東西，如谷歌地圖不會工作 – user151496 2014-05-11 13:09:41

我喜歡這種方法非常優雅。我將爲替換pointerEvents提供一個鏡頭：在較舊的瀏覽器中不存在 – 2016-03-09 18:50:28

-5

添加以下CSS將禁用毫秒指針。

#container{ 
    -ms-touch-action: none; 
}

來源

2013-12-09 18:02:14

這不起作用。在IE7-9中測試。 – jibiel 2014-01-12 04:25:22

沒有工作。嘗試在IE8中。 – 2014-03-03 20:08:56

沒有工作IE11 – Craig 2016-09-02 08:42:40

CSS：

#red_silk { 
    width:100%; 
    background: url('../img/red_silk.png') no-repeat center top; 
    height:393px; 
    z-index: 2; 
    position: absolute; 
    pointer-events: none; 
}

舊的HTML：

<div id="red_silk"></div>

新的HTML：

<svg id="red_silk"></svg>

來源

2014-04-25 11:23:12 Vladimir

如何使Internet Explorer模擬指針事件：無？

回答

相關問題