0

空白を含め、表の行全体をクリック可能にしたいと考えています。JavaScript と TR のクリック ハンドラーを使用するか、各 TD を display:block として作成するだけでこれを行う方法を見てきました。

しわは、行に別の場所にリンクするテキストを入れたいが、残りの行全体の基になるリンクをトリガーしないことです。基本的に、この特別なテキストは「バッジ」のようなものになります。

このようなもの：

T = Text
B = Badge
W = Whitespace

行内の単一のセルは次のようになります。

TTTTT BB WWWWWWWWWWWWWWWWWWW

T と W をクリックすると 1 つのリンクに移動しますが、これは通常のケースです。しかし、B をクリックすると、新しいウィンドウで別のリンクが開き、メイン ウィンドウで元のリンクが開きません。

これが純粋な HTML/CSS または JavaScript などで実行できるかどうか、正しい方向へのポインタを探しています。ありがとう、

4

2 に答える 2

2

ナビゲーションに A 要素を使用できます。行が 1 つからクリックされた場合、それを無視します。

<tr onclick="doSomething(event);">
  <td>
    <a href="…">TTTTT</a><a href="…">BB</a>WWWWWWWWW…


function doSomething(evt) {
  var tgt = evt.target || evt.srcElement;
  if (tgt && tgt.tagName.toLowerCase() == 'a' && tgt.href) {
    // don't do click action
    return;
  } 
  // do click action
}

ああ、TRはdisplay: table-cellであるはずなので、display: ブロックしないでください。

于 2012-04-10T02:14:03.213 に答える
1

イベントのtargetFF/Chrome/Safari、またはsrcElementIE プロパティを見てください。TR でイベントを聞いている場合でも、event.target実際にクリックされたように見えるはずです。次に、要素 (またはその親) を調べて、実行するアクションを決定できます。詳細: https://developer.mozilla.org/en/DOM/event.target

于 2012-04-10T02:13:26.567 に答える