1

私は以下のようなDOM構造を持っています -

<div id='MyDiv'>
    <span>Hello MyDiv</span>
    <p class='MyClass'>
        <img src='image.png' alt='myImage' width='300px' height='300px' />
        <a href='#goToNextDiv'>Go to next</a>
    </p>
</div>

プロトタイプ ライブラリに添付されたクリック イベント ハンドラが追加されましMyDivたが、そのソースにはアクセスできません。このハンドラーを div から削除し、別のハンドラーを挿入したいと考えています。私はこれのために次のコードを試しました -

var content = document.getElementById('MyDiv');
content.addEventListener('click', function(event){
    event.preventDefault();
    event.stopPropagation();

    alert('This is my handler');    

    return false;
}, true);

問題は、このコードclickがアンカー タグのイベントも妨げていることです。div をクリックすると、イベント ハンドラーが実行されますが、これは望ましいことですが、アンカー タグを停止して、通常の動作 ( div にジャンプするgoToNextDiv) を実行することもできます。

ここで、行をコメントアウトしてみましたevent.stopPropagation()。これにより、イベントの伝播が再び有効になり、アンカーがそれに応じて動作できるようになりますが、以前の のクリック イベント ハンドラも実行されますMyDiv。

以前のハンドラーを div から削除して、新しいハンドラーを追加するにはどうすればよいですか?

  1. div の前のイベント ハンドラーが呼び出されない
  2. 私のdivイベントハンドラーが実行されます
  3. アンカータグも機能します（div内の任意の場所に多くのアンカータグが存在する可能性があります）
4

1 に答える 1

2

クリック ターゲットがアンカーであり、デフォルト アクションを妨げないかどうかを確認できます。

var content = document.getElementById('MyDiv');
content.addEventListener('click', function(event){
    if (event.target.tagName != 'A'){//or some other way to tell if it is a link
        event.preventDefault();
        event.stopPropagation();

        alert('This is my handler');    

        return false;
    }
}, true);
于 2012-08-02T05:14:17.593 に答える