なぜこのプロトタイプコードがこのように機能するのですか？

StackOverflow https://stackoverflow.com/questions/1800061

  •  05-07-2019
  •  | 
  •  

質問

これは私のhtmlです：

（注：簡単にするために、これをどのように機能させるかを示すために、背景画像を使用しませんでした）

<div class="foo">
    <ul>
        <li><a href="#" class="bar"><img src="bar.gif" /></a></li>
        <li><a href="#" class="baz"><img src="baz.gif" /></a></li>
    </ul>
</div>

そして私のJavaScript：

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $('.foo a').each(function(a) {
            alert(a); // this is the anchor
            a.observe('click', fooClick);
    });

    function fooClick(event) {
        alert(event.element()); // this is the img
    }
</script>

fooの要素はアンカーではなく画像をクリックするのはなぜですか？画像を使用するにはどうすればよいですか。

役に立ちましたか？

解決

クリックハンドラーがアンカーにバインドされている間、画像上でクリックイベントが発生します。イベントはDOMをバブルアップし、アンカーのイベントハンドラーが呼び出されます。 event.element（） は、イベントが発生した要素です。オン

他のヒント

あなたの質問で少し混乱しています、＆quot;なぜfooの要素はアンカーではなく画像をクリックしますか？画像を使用するにはどうすればよいですか？」

「アンカー」という意味ですか？最後の文で？その場合、event.element（）はクリックされた実際の要素であり、必ずしもハンドラーが割り当てられている要素ではありません。アンカーが必要な場合は、alert（event.element（）。up（ 'A'））のような操作を行うことができます。

画像を背景として使用する場合は、event.element（）としてアンカーを取得する必要があります。 event.element（）はevent.targetと同じであり、これは最初にイベントを受信し、このイベントからDOMをバブルアップする要素だと思います。したがって、削除（css / background-imageに移動）するか、element（）親を確認します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top