1

わかりました、私は混乱しています。にグローバル クリック イベント ハンドラがありdocumentます。ページにはいくつかのリンクがあります。各リンクは同じクリック イベント ハンドラーによって処理されます。これにより、特に、イベントがドキュメント レベルにバブリングするのを防ぎ、リンクが実行されなくなります。これらのリンクのうち、1 つには特定のクリック ハンドラーがあり、そのハンドラーがその役割を果たし、そのイベントをリンクの一般的なクリック イベントに渡します。しかし、そうではありません。

document.onclick = function()
  {
   document.body.innerHTML += "You clicked me!"; 
};

  document.getElementsByTagName("a")[0].onclick = function(e) {
   this.innerHTML += " Click it!";
    e.stopPropagation();
    //This return false appears only to
    //prevent the link from its default action
  return false; 
  };
document.getElementById("link").onclick = function(e) {
  this.innerHTML += " Go ahead, ";
  //But this return false appears to stop
  //the propagation up to the previous event
  //I would think that removing the link below
  //would cause the event to propagate to the event
  //above which would then stop the propagation and
  //prevent the default, but apparently this is 
  //not the case; removing the line below causes
  //the link to load Google like normal
  return false;
};

下位のイベントを発生させ、上位のイベントまでイベントをキャンセルするにはどうすればよいですか?

私がここで何を意味するか見てください

4

1 に答える 1

2

はぁ、当たり前。usingelement.on<event>は、要素の DOM でプロパティを設定するだけです。つまり、各イベントは 1 つのハンドラーしか持つことができません。代わりに、との適切な使用と組み合わせて使用​​する必要がありaddEventListenerますevent.preventDefault()event.stopPropagation()

最初の試行では、最初のハンドラーにしたいものを 2 番目に配置していましたが、それは実際には最初のハンドラーをオーバーライドすることを意味していました。この場合、ハンドラーがイベントにアタッチされているため、最初に必要なハンドラーを配置する必要があります。

私の修正されたコードは次のようになります。

document.onclick = function()
  {
   document.body.innerHTML += "You clicked me!"; 
};
document.getElementById("link").addEventListener("click",function() {
  this.innerHTML += " Go ahead, ";
});
  document.getElementsByTagName("a")[0].addEventListener("click",function(e) {
   this.innerHTML += " Click it!"; 
    e.stopPropagation();
    e.preventDefault();
   });

http://jsbin.com/ecozep/8/edit

于 2011-07-20T19:57:10.637 に答える