javascript - "pointer-events: none" が IE9 および IE10 で機能しない

Question

CSS - プロパティpointer-events: none; は Firefox では正常に機能しますが、Internet Explorer 9 ～ 10 では機能しません。

IE でこのプロパティの同じ動作を実現する方法はありますか? 何か案は？

Answer 1

MDN ドキュメントから:

警告: 非 SVG 要素に対する CSS でのポインター イベントの使用は実験的なものです。この機能は、以前は CSS3 UI ドラフト仕様の一部でしたが、未解決の問題が多数あるため、CSS4 に延期されました。

詳細はこちら、基本的pointer-eventsに、非 SVG (スケーラブル ベクター グラフィック) は非標準です。
リンクされたページ (約 3 分の 2 ダウン) のブラウザー サポート テーブルを確認すると、非 SVG での IE サポートはziltsh、jack squat、nautなどであることがわかります。つまり、サポートされていません。

掘り下げた後、レイヤーを使用して動作を模倣できるこの記事に出くわしました。この投稿のおかげで、このJS-binが役立つ可能性があります...

ただし、IE（およびOpera、およびAFAIKすべてのブラウザー）では、要素にカーソルのタイプを強制するだけです。

a, a:hover, a:visited, a:active, a:focus /*, * <-- add all tags?*/
{
    cursor: default;/*plain arrow*/
    text-decoration: none;/*No underline or something*/
    color: #07C;/*Default link colour*/
}

結果は次の結果とかなり似ているはずですpointer-events: none;

アップデート：

shasi が指摘したように、他のブラウザーでは防止されている IE のクリック イベントを防止したい場合は、クリック イベントをデリゲートするイベント リスナーを追加するだけです。現時点では、すべての要素
をターゲットにしていると仮定します。a

var handler = function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a')
    {
        if (!e.preventDefault)
        {//IE quirks
            e.returnValue = false;
            e.cancelBubble = true;
        }
        e.preventDefault();
        e.stopPropagation();
    }
};
if (window.addEventListener)
    window.addEventListener('click', handler, false);
else
    window.attachEvent('onclick', handler);

これにより、アンカー要素のすべてのクリック イベントが防止されます。