YUIイベントとリンク

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

  •  05-07-2019
  •  | 
  •  

質問

YUIを使用すると、divがあり、そのdivをクリックするとコールバック関数が実行されるというリスナーが添付されています。 div内には、他のページへの一連の通常のhtmlリンクがあります。起こりたいのは、リンクをクリックすると、そのページに移動するということです。しかし、リンクの外側のdivのどこかをクリックすると、コールバック関数が実行されます。

実際に起こっているのは、div内のリンクをクリックすると、divのコールバック関数が実行され、すぐにリンク先ページに移動することです。

div内のクリックがドキュメントにバブリングしないようにする方法を知っています。しかし、通常の古いhtmlリンクを取得して、そのクリックがdivのクリックイベントを発生させないようにするにはどうすればよいですか？リンクを独自のコールバックを持つjavascriptリンクとして再フォーマットし、伝播を停止する必要がありますか？または、もっと簡単な方法はありますか？

エイミー

役に立ちましたか？

解決

Sethは正しい考えを持っていますが、チェックをもう少し具体的にするのは良い考えです。

YAHOO.util.Event.on("container", "click", function(e) {
    var tgt = YAHOO.util.Event.getTarget(e);

    if(tgt.nodeName.toLowerCase() !== 'a') {
        YAHOO.util.Event.preventDefault(e);

        console.log("Not an anchor!"); //TODO: REMOVE DEBUG OUTPUT
    }
});

http://tivac.com/yui2/amy_events.htm動作中に見たい場合に備えて。

他のヒント

event.target で tagName を調べることができます：

YAHOO.util.Event.addListener("container", "click", function(e) { 
  if (e.target.tagName == 'DIV') {
     // do something magical!
  }
});

ただし、アンカータグ内にdivを配置する場合は、明らかにこれを破るでしょう。

所属していません StackOverflow
scroll top