web-dev-qa-db-ja.com

Internet Explorerでpointer-events：noneをエミュレートする方法は？

私は、チャート上にグラデーションPNGを表示することにより、ハイチャートを強化するプロジェクトに取り組んでいます。 CSS pointer-events:none;を使用して、最上部に階層化されたdivがあるにもかかわらず、ユーザーがチャートを操作できるようにします。 IEはpointer-events:none;を認識しないため、IEのユーザーは、強化されたチャートデザインを使用できないか、チャートを操作できません。 。IEを取得してマウスイベント（具体的にはホバーイベント）を許可し、divをその下の要素に渡す方法を探しています。

ここで作業しているモデルを見ることができます： http://jsfiddle.net/PFKEM/2/

IEのような何かをする方法はありますかpointer events:none;、マウスイベントが要素を通過して要素を爆破する場所？

javascripthtmlcssinternet-explorercross-browser
40
Code Junkie

Internet Explorerはポインターイベントを認識します：なし、ただしSVG要素のみ。ポインターイベントはW3C仕様（ http://www.w3.org/TRのSVG要素に対してのみ指定されるためです。 /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翻訳の助けを借りて）詳細情報があります。

私が助けてくれることを願っています

ベニー

追伸上にあるオブジェクトや基礎となるオブジェクトにアクセスする場合は、IE（ http://msdn.Microsoft.com）でdocument.msElementsFromPointメソッドを使用できます。 /de-DE/library/windows/apps/hh465811.aspx ）。配列内の特定のポイントにあるすべてのレイヤーを提供します。

37
Benny Neugebauer

IE10プロジェクトでこれを調査するために2日間を費やしました（IE10はポインターイベントをサポートしていません：CSSプロパティなし、MSはクリックジャックの問題の可能性があるため仕様の撤回に投票しました）。回避策は、インラインSVGタグを使用し、SVGでポインターイベントを設定することです。私は例えばSVG srcを含むIMGタグ、またはSVGファイルに設定されたbackground-imageを含むDIV（pointer-events = "none"を使用する場所）、SVG data-urisでも、別の要素で、実装されていないpointer-events CSSプロパティが正確に必要でした。

したがって、次のような最低限のSVGが必要です。

    .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=6705

24
obiuquido144

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;

        });
6
MarzSocks
$.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');
});
4
yckart

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

OLD HTML：

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

新しいHTML：

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