4

HTML、Javascript、および css を使用して、独自のインタラクティブなチュートリアルを作成しようとしています。ここで、特定の領域をマークするために光る長方形を表す DIV 要素を作成するというアイデアがありました。問題は、グロー長方形の位置を変更して、クリック可能な要素を強調表示すると、グロー長方形がクリック可能な要素と重なることです。したがって、クリック可能な要素はクリックできなくなります。グロー長方形を「無効」にして、表示されているが下にある要素をブロックしないようにする方法はありますか?

これが私のコードです：

<div id="hauptteil">
    <div id="block" onclick="step2();" style="cursor: pointer">

    </div>

    <div id="glowDiv">
         <div id="glow" class="glow"><img src="images/transBlock.png"/></div>
    </div>                
</div>

CSSコードは次のとおりです。

#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}

.glow {
   margin: auto;
   width: 147px;
   height: 90px;

   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;  
   border-radius: 15px;

   -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

#block {
   width: 50px;
   height: 50px;
   background: red;
}

私の問題を視覚化する。私のページには、赤いブロックとして表示される DIV 要素があります。チュートリアルを開始するとき、glow-DIV の位置を変更して赤いブロックを覆います。ということで、赤いブロックが光っているようです。

4

4 に答える 4

5

2013 年には、この問題を解決するためにスクリプトを使用する必要がありましたが、現在でpointer-eventsは広くサポートされています。これを使って！

pointer-events通常、 css プロパティを使用するだけです。何だと思う？IE ではサポートされていません... ただし、友人の jquery の助けを借りて、これをエミュレートできます。

私のアプローチは、グロー（絶対位置のdiv）でクリックイベントをキャプチャし、マウスクリックのxy座標に重なる他の要素があるかどうかを確認することです。

警告: jQuery を先に進めてください!

まず、クリック イベントをキャプチャします。

$('.glow').on('click', function(e) {  // our trick here });

次に、マウス カーソルの座標を決定します。イベントオブジェクトの座標を与えることでjQueryが私たちを助けるので、とても簡単です

var cursorX = e.pageX;
var cursorY = e.pageY;

ここで、クリック イベントも受け取りたいグロー div の下にある可能性のあるすべての dom 要素をトラバースする必要があります。

$('.class-possibly-below').each(function(index, element) { // our calculations here });

ウィンドウに対する相対的な位置とその幅と高さを取得できれば、クリック中にカーソルがその上にあったかどうかを計算できます。その場合、cursorX と cursorY の値は、トラバースしている DOM 要素のleft-positionand (およびそれぞれ top- と height) の間にあります。left-position + widthここでも jQuery が少し役に立ちます。

var offset = $(element).offset();
xRangeMin = offset.left;
xRangeMax = offset.left + $(element).outerWidth();

後者はその親に対する相対的なoffset()位置を返すため、代わりに使用します。前者にはパディングと境界線も含まれるため、それぞれandの代わりにandを使用します。position()outerWidth()outerHeight()width()height()

x 座標と y 座標が range-min と range-max の間にあるかどうかを確認します。その場合は、この要素でクリック イベントをトリガーします。

if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {
    $(element).trigger('click');
}

アクションが必要ですか？このフィドルをチェックしてください！

于 2013-08-30T13:37:38.160 に答える
1

私のコメントで述べたように、別のアプローチは、glow クラスをアクティブな div に追加することです。

<div id="hauptteil">
   <div id="block" onclick="step2();" class="glow">
</div>              


#block {
   width: 50px;
   height: 50px;
   background: red;
}
.glow {
   cursor:pointer;
   -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}
于 2013-08-30T13:04:42.440 に答える
0

pointer-events: none;要素の可能なクリックイベントを無視するために使用できます。ただし、コメントに記載されているように、あなたが行っている方法は最善の選択肢ではないようです。

#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
pointer-events: none;
}

pointer-events プロパティを使用すると、HTML 要素がマウス/タッチ イベントにどのように応答するかを制御できます。これには、CSS のホバー/アクティブ状態、Javascript のクリック/タップ イベント、およびカーソルを表示するかどうかが含まれます。

これをオーバーレイ要素に配置すると、クリック イベントに対して透過的になります。

ただし、これはIEでは機能しません

これは、他の誰かが別のオプションを持っているかどうかに興味がある私の提案です. 私は自分のウェブサイトで同じことを使用しており、条件付きタグを使用して IE のオーバーレイを単に無視しています。

于 2013-08-30T12:56:51.080 に答える
0

これは、 http://codepen.io/ElmahdiMahmoud/pen/Ewlで確認できる簡単なピンです。これがお役に立てば幸いです。

于 2013-08-30T13:20:16.303 に答える