1

大きなマップを必要とするゲームに取り組んでいます。私がしていることは、スクロール可能な div (scrollWindow) の背景に 12k x 12k ピクセルの大きなマップを z-index 1 で設定することです。

その後、Ajax 呼び出しによって JSON データが返され、大きな背景マップ内に多数のクラス (City_Palace) が追加されます。要素の z-index は 9 です。

また、カーソルが背景のマップ上にあるか、その上に描画された都市の 1 つ上にあるかに基づいて、異なることを行うマウスオーバー イベントをいくつか設定しています。ただし、都市の z-index がメイン ウィンドウの z-index よりはるかに高い場合でも、スクロール可能なウィンドウが「上」にあるため、都市のマウスオーバーに対してイベントが発生することはありません。

マウスイベントに関して、jqueryがどのdivが「上」にあるかを判断するために使用される基準は何ですか? z-indexはそうではないようです。

ここにいくつかのコードがあります：

CSS:

#scrollWindow {
    width: 1970px;
    height: 900px;
    overflow: scroll;
    border: solid black 3px;
    position: absolute;
    z-index:1;
}

.City_Palace {
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 9;
    background-image: url("../Images/City_Palace.png");
    background-size: 100% 100%;

}

Jクエリ:

$('.City_Palace').mouseover(function() {
    alert("city classes on top");
});


$("#scrollWindow").mousemove(function(e){
    alert("scroll window on top");
});

HTML の生成方法は次のとおりです。

<div id="scrollWindow" class="ui-widget-content" style="width: 2105px;">
    <img id="img" src="../Images/fullSizeMap.png">
    <div class="City_Palace" value="coast" style="left: 780px; top: 540px;"></div>
</div>

どういうわけか、親子関係が z-index をオーバーライドしていると推測しています。これを修正する方法について何か提案はありますか? ありがとう！

4

1 に答える 1

1

次のようにdom構造を調べると：

<div class="parent">
    <div>
        <div class="top">
        </div>
    </div>
</div>
<div class="laterindom"></div>

z-index はレイアウト/スタイルによって異なります。

他の要素の前に配置されている要素は、z-index 階層でそれらの「下」に配置されます。ただし、それらの z-index を指定している場合を除きます。

別の要素 (class="top" 要素など) の "in" 要素は、z-index で親の上にありますが、マウスオーバー イベントはデフォルトで dom でバブルアップするため、mouseover イベントを "親"クラスでは、「トップ」要素が「親」要素の「上」にある場合でも、バブルアップするため、メソッドも呼び出されます:)

ちなみに、次のように event.stopPropagation() を呼び出すことで、イベントのバブリングを防ぐことができます。

$(element).mousemove(function(event) {
    event.stopPropagation();
    //some other code here
});

親の z-index を 1 に設定し、「top」の z-index を 9 に設定し、「laterindom」の z-index を 2 に設定した場合、「laterindom」要素は「top」の上にあります。 「トップ」要素はもっと高いはずです..悲しいですが、そのように定義されています。

この例では: http://jsfiddle.net/R59Q8/3/都市はスクロール ウィンドウの上にありますが、dom のスクロール ウィンドウの下の要素は都市の上にあります。要素のみ 2.

お役に立てれば

于 2013-06-16T20:57:46.827 に答える