1

私のhtmlには

<div id="map"></div>

#map {
    width: 100%;
    height: 100%;
    background-color: #CCC;
}

次のようないくつかのdivで動的に埋められます

<div class="basicTiles1" style="left: 8128px; top: 8128px;"></div>

.basictiles1 {
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url(<snip urlToPng>);
    background-position: 0px 0px;
}

次に、onmousedown イベントが #map に追加されます。

$('#map').on('mousedown', function(){console.log("mousedown");});

イベントがトリガーされることはありません。マップにタイルを追加しなければ、機能します。

jqueryの「on」、「onmousedown」、javascripts「addEventListener」でやってみました。スクリプトにコンパイル エラーはありません。イベントは少しずつ減っているようには見えません。

タイルが絶対位置だからですか？動的に追加されているためですか？

4

1 に答える 1

3

イベントをバインドするとき、DIV がまだそこにないことを理解しています。delegate代わりに、次のように使用してみてください。

$("#map").delegate("div", "mousedown", function() {
    console.log("mousedown");
});

編集: 詳細化 jQuery.on()リファレンスには、「1 つまたは複数のイベントのイベント ハンドラー関数を、選択した要素にアタッチする」と記載されています。

さらに、イベントを直接バインドする#mapと、何か他のもので覆わない限り機能します (実際の #map 要素をマウスダウンする必要があります)。

その代わりに、jQuery.delegate()リファレンスには、「特定のルート要素セットに基づいて、現在または将来、セレクターに一致するすべての要素の 1 つ以上のイベントにハンドラーをアタッチする」と記載されています。

イベントをバインドした後に内部 div を追加するので、これはまさにあなたがやりたいことと一致します。「div」セレクターを指定すると、実際には mousedown が #map 内の任意の (現在または将来の) div にバインドされます。div.basictiles1そこにクリックできない他のdivがある場合は、実際に使用できます。

于 2013-01-27T16:12:36.993 に答える