web-dev-qa-db-ja.com

「ポインターイベント：なし」がIE9およびIE10で機能しない

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

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

javascripthtmlcsscss3internet-explorer
24
Vova Potapov

MDNドキュメントから：

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

詳細はこちら 、基本的に、非SVG（Scalable Vector Graphic）のpointer-eventsは非標準です。
リンクされたページのブラウザサポートテーブルを確認すると（約3分の2）、IE non-svgのサポートはziltsh、ジャックスクワット、naut、...サポートされていません、つまり。

掘り下げた後、私は この記事 に遭遇しました。これにより、レイヤーを使用して動作を模倣することができます。 この投稿 のおかげで、私は このJS-bin それが役立つかもしれません...

ただし、IE（およびOpera、およびすべてのブラウザ）では、要素にカーソルのタイプを強制することができます：

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;の結果とかなり似ているはずです

更新：

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);

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

21
Elias Van Ootegem

APIを見ると、Rich HarrisのPoints.jsも、 Hands.js も、pointer-events：none。

したがって、この機能をポリフィルするための小さなスクリプトを実装しました。

5
Kent Mewhort

くだらないIE10の場合、別の解決策、例があります：

/* must be over the element that have the action */

.action-container:after {
    content: ' ';
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
    z-index: 250; 
    background-color: grey; /* must have a color on ie10, if not :after does not exist... */
    opacity: 0;
}
4
artde