web-dev-qa-db-ja.com

IEのc​​ss 'pointer-events'プロパティの代替

ドロップダウンナビゲーションメニューがあり、クリックするとタイトルの一部が他のページに移動しません（クリックするとドロップダウンメニューが開きます）。型にはhrefが定義されています

これを解決するために、以前のタイプのタイトルに次のCSSを追加しました

pointer-events: none;

しかし、このプロパティはIEでサポートされていないため、回避策を探しています。厄介なのは、HTMLとJavaScriptコードを変更するためのアクセス権と特権がない完全なことです。

何か案は？

htmlcssinternet-explorerbrowsercross-browser
154
anu

ポインターイベントは、Mozillaのハックであり、Webkitブラウザーで実装されている場合、IEブラウザーでさらに数百万年の間、それを見ることができません。

しかし、私が見つけた解決策があります：

レイヤーを介したマウスイベントの転送

これは、JavaScriptのあまり知られていない/理解されていないプロパティを使用するプラグインを使用して、マウスイベントを取得し、別の要素に送信します。

別のJavaScriptソリューションもあります here 。

2013年10月の更新：明らかにv11のIEになります。 ソース 。ありがとう、ティム。

86
Kyle

5行のコードで非常に簡単に実装できる別のソリューションを次に示します。

  1. 最上位要素（ポインターイベントをオフにする要素）の「mousedown」イベントをキャプチャします。
  2. 「mousedown」で最上部の要素を非表示にします。
  3. 'document.elementFromPoint（）'を使用して、基になる要素を取得します。
  4. 上の要素を再表示します。
  5. 基になる要素に対して目的のイベントを実行します。

例：

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

});
19
MarzSocks

IEの回避策があります-インラインSVGを使用し、SVGでpointer-events = "none"を設定します。 Internet Explorerにポインターイベントをエミュレートさせる方法：なし？

17
obiuquido144

特にIEの場合、disabled=disabledはアンカータグに対して機能することを言及する価値があります。

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IEはこれをdisabled要素として扱い、クリックイベントをトリガーしません。ただし、disabledはアンカータグの有効な属性ではありません。したがって、これは他のブラウザーでは機能しません。それらの場合、スタイリングにはpointer-events:noneが必要です。

PDATE 1：したがって、次のルールを追加することはクロスブラウザソリューションのように感じます

PDATE 2：IEはdisabled='disabled'を含むアンカータグのスタイルを形成しないため、互換性を保つために、 見て アクティブ。したがって、a:hover{}ルールとスタイリングは良いアイデアです。

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Chrome、IE11、およびIE8での作業。
もちろん、上記のCSSはアンカータグがdisabled="disabled"でレンダリングされることを前提としています

9
Nikhil

この機能を実装する小さなスクリプトを次に示します（ Shea Frederickブログ記事 Kyleが言及していることに触発された）：

6
Kent Mewhort

:beforeまたは:afterを使用して、問題の要素を非表示ブロックで覆います。

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

したがって、クリックすると親要素が表示されます。親がクリック可能な場合はダメですが、それ以外の場合はうまく機能します。

4
Graham P Heath

私はこの問題の解決策を見つけるのにほぼ2日間を費やし、ついにこれを見つけました。

これは、javascriptとjqueryを使用します。

（GitHub）pointer_events_polyfill

これは、javascriptプラグインを使用してダウンロード/コピーすることができます。そのサイトからコードをコピー/ダウンロードし、pointer_events_polyfill.jsとして保存します。そのJavaScriptをサイトに含めます。

<script src="JS/pointer_events_polyfill.js></script>

このjqueryスクリプトをサイトに追加します

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

また、jqueryプラグインを含めることを忘れないでください。

できます！透明な要素の下の要素をクリックできます。 IE 10を使用しています。これがIE 9以下でも機能することを願っています。

EDIT：透明要素の下のテキストボックスをクリックすると、このソリューションの使用は機能しません。この問題を解決するために、ユーザーがテキストボックスをクリックしたときにフォーカスを使用します。

Javascript：

document.getElementById("theTextbox").focus();

JQuery：

$("#theTextbox").focus();

これにより、テキストをテキストボックスに入力できます。

4
Mai

また、<a>タグ内にURLを「追加しない」こともできます。これは、ドロップダウンで駆動される<a>タグのメニューに対しても行います。ドロップダウンがない場合はURLを追加しますが、<ul> <li>リストのドロップダウンがある場合は削除します。

0
user3657756

OnClientClick = "return false;"を使用

0
Medde

私は同様の問題に直面しました：

  1. 私はディレクティブでこの問題に直面し、親要素としてを追加し、そのためにpointer-events：noneを作成して修正しました

  2. 上記の修正は選択タグでは機能しませんでしたが、cursor：text（これは私が望んでいたものです）を追加し、私のために機能しました

通常のカーソルが必要な場合は、cursor：defaultを追加できます

0
Z.T

この問題を解決する別の解決策を見つけました。ブラウザウィンドウの幅が1'000pxより大きい場合、jQueryを使用してhref-- attributeをjavascript:;に設定します（ ''ではないか、ブラウザがページをリロードします）。リンクにIDを追加する必要があります。ここに私がやっていることがあります：

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

たぶんそれはあなたにとって役に立つでしょう。

0
yves.beutler