IEの代替のcss 'pointer-events'プロパティ

ドロップダウンナビゲーションメニューがあり、クリックすると他のページに移動できないタイトルがあります（これらのタイトルをクリックするとドロップダウンメニューが開きます）一方で、他のナビゲーション（これらにはドロップダウンがなく、直接移動する必要があります）です。ただし、両方とも型がhref定義されています

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

pointer-events: none;

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

何か案は？

Pointer-eventsはMozillaのハックであり、Webkitブラウザーで実装されている場合、IEブラウザーでさらに100万年もの間見られるとは期待できません。

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

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

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

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

2013年10月の更新：どうやらv11でIEに登場する予定です。ソース。ティムありがとう。

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

1. 一番上の要素（ポインタイベントをオフにする要素）の「mousedown」イベントをキャプチャします。
2. 「マウスダウン」で一番上の要素を非表示にします。
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;

});

IEには回避策があります。インラインSVGを使用し、SVGでpointer-events = "none"を設定します。Internet Explorerにpointer-events：noneをエミュレートさせる方法の私の回答を参照してください。

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

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

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

UPDATE 1：だから私にはクロスブラウザのソリューションなどは、以下のルールフィールを追加する

UPDATE 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"

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

• ポインタイベントポリフィル。

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

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

したがって、親要素のランドをクリックします。親がクリック可能な場合は問題ありませんが、それ以外の場合はうまく機能します。

私はこの問題の解決策を見つけるのにほぼ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以下でも動作することを願っています。

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

JavaScript：

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

jQuery：

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

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

この問題を解決する別の解決策を見つけました。ブラウザーウィンドウの幅が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:;'); 
}

多分それはあなたのために便利です。

使用する OnClientClick = "return false;"

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

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

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

2. 上記の修正はselectタグでは機能しませんでした、そして私はcursor：textを追加しました（これは私が欲しかったものです）そしてそれは私のために機能しました

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

最適なソリューション：

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

すべてのブラウザで完全に実行されます