3

リストビューに次の HTML スニペットが含まれています。リストビューの各要素はサムネイルで始まります。

<li>
<a href="javascript:alert("don't want to see this alert);" >
<img src="/images/testimage_thumb.png" onclick="displayImage('/gallery/testimage.jpg');">
<h4>Test Image</h4>
<p>Description of test Image</p>
</a>
</li>

<li>
<a href="javascript:alert("don't want to see this alert either);" >
<img src="/images/testimage2_thumb.png" onclick="displayImage('/gallery/testimage2.jpg');">
<h4>Second Test Image</h4>
<p>Description of the Second Test Image</p>
</a>
</li>

チャンピオンのように機能します（少なくとも表示する限り）。ユーザーがサムネイルをクリックして大きな画像を表示し、基になるアンカー リンク (この場合は警告メッセージが表示されます) をトリガーしないようにしたいと考えています。

イベントオブジェクトへのアクセスを許可する関数にクリックイベントをバインドする方法がわからないだけで、答えは preventDefault() にあると確信しています。リストビューには複数のサムがあり、リストは別のイベントに応答して動的に生成されます。リストを生成するためにページが読み込まれると、 pagebeforeshow() イベントを使用します。

4

1 に答える 1

5

画像にクリック ハンドラーを追加するだけです。

$('img.ui-li-thumb').click(function(){
    alert('I am the image');
    return false;
});

これにより、ui-li-thumb クラスを持つ画像にクリック ハンドラーがバインドされます。基本的にサムネイルになっている画像が全てです。必要に応じて、セレクターをさらにカスタマイズして、特定の ul に適用します。これは jqm によって動的に追加されるクラスです。return false が呼び出されます

  1. preventDefault （imgタグにイベントがないため、この場合は何もしません。）
  2. stopPropagation （これはあなたが望むものです。これにより、イベントのバブリングが停止します。バブリングとは、img があるタグのハンドラーを呼び出すことを意味します。）

上記のコードは次のように置き換えることができます

$('img.ui-li-thumb').click(function(e){
    e.stopPropagation();
    alert('I am the image');
});

ここでデモを確認してください。実際の画像はありませんでした。

そして、尋ねられたことを少し超えて、これを確認してくださいevent.stopPropagation と event.preventDefault の違いは何ですか?

アップデート

$('img.ui-li-thumb').click(function(e){
    e.stopPropagation();
    alert(this.src);
});

更新 2

残念ながら、OPは動的要素を考慮する必要があると言いました。

$('div[data-role="content"]').on('click', 'a', function(){

    alert(1);
});

$('div[data-role="content"]').on('click', 'img.ui-li-thumb', function(e){
   //e.preventDefault();
    e.stopPropagation();
    alert(2);
});

これは正しいものです。jquery 1.7 以降では、この種のバインディングに on を使用できます (これにより、動的要素のバインディングが処理されます)。

私は変更を加えました。on() の動作方法が異なるため、e.preventDefault を追加しました。「a」タグのハンドラは起動されませんが (そのため、alert(1)何も表示されません)、リンクをたどるリンク タグのデフォルトの動作のままになります。したがって、両方を追加するか、それらを削除して最後に追加します

return false;

デモをチェック

于 2013-06-12T21:03:18.190 に答える