2

私のhome.htmlには次のものがあります。

<a href="/pages/page2/page2.html">Go to page2</a>

これはhome.jsによって処理されます：

WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false);

定義されたlinkClickEventHandler：

function linkClickEventHandler(eventInfo)
{
   eventInfo.preventDefault();
   var link = eventInfo.target;
   WinJS.Navigation.navigate(link.href);
}

ご覧のとおり<a>、通常のHTMLナビゲーションの代わりにページコントロールナビゲーションを使用する動作をオーバーライドしています。

[ページ2に移動]をクリックすると、ページコントロールがhome.htmlからpage2.htmlに正常に変更されます。

「Gotopage2」というテキストの代わりに、<a>タグ内の画像を使用したい場合はどうすればよいでしょうか。

<a href="/pages/page2/page2.html"><img src="page2.png" /></a>

これはうまくいかないようです。画像を読み込んで表示しましたが、画像をクリックすると、ページコントロールが「PNG」で始まる不明な（正方形の）文字でいっぱいのガベージテキストに変わるため、画像をテキスト形式で表示しようとしているようです。 .. PHOTOSHOP ... "（フォトショップを使用して画像を作成しました）

私も追加してみました：

WinJS.Utilities.query("img").listen("click", linkClickEventHandler, false);

しかし、それは何もしません

4

1 に答える 1

4

これを使って：

var link = eventInfo.currentTarget;

... 代わりは。eventInfo.currentTargetほら、と（ドキュメントeventInfo.targetを引用）の間には微妙でありながら重要な違いがあります：

targetプロパティは、最初にイベントを受け取った要素を返します。ただし、currentTargetプロパティは、キャプチャフェーズとバブリングフェーズでイベントハンドラーが処理されている要素を返します。

このバグはeventInfo.target、リンク要素ではなく、画像要素が原因で発生します。）参照してください、技術的にはclickイベントはその中で最初に発生します<img src... />; 最終的には外部<a href="...">要素（いわゆるbubbling）に到達しましたが、元のターゲット（= eventInfo.target）は同じです！したがって、スクリプトは実際にsrcは、画像の属性で指定されたURL（hrefプロパティ値として取得）に移動します。

于 2012-10-16T14:02:39.773 に答える