6

表の行にクリック イベントがあるという問題がありますが、ユーザーが表の行のセルの 1 つのリンクをクリックしたときに、行のクリック イベントを発生させたくありません。

表のセルにリンクがあり、通常、表の行の空白の領域 (リンクではない) をクリックすると、アコーディオン/行の折りたたみや展開などのアクションが発生する場合を想像してください。

発生しているのは、以下のクリックイベントが発生し、リンクがたどられていることです (意図したアクション)。

私がする必要があるのは、a 内の a href のクリックが tr.title-row クリック アクションをトリガーしないようにすることです (たとえば、アラートは発生せず、リンクをたどる必要があります)。

この jQuery コードは、タイトル行のクリック イベントを設定しています (たとえば、その行のすべての TH、任意のセルなど)。

$(document).ready(function() {
$(".report tr.title-row").click(function() {
    alert('I am firing!');
});

これが適用される同じ HTML は次のとおりです。

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="report">
  <tbody>
    <tr class="title-row">
      <th width="340"><span class="title">Test</span>
      </th>
      <th width="130" class="center-cell">Test</th>
      <th width="90" class="status"></th>
      <th></th>
      <th width="160"> <a target="_self" href="http://www.google.com" class="link-class sub-class">I am triggering the TR click event</a>
      </th>
    </tr>
    <tr>
      <td class="sub-row" colspan="5">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <td><strong>SubRow</strong>
              </td>
              <td width="90" class="status"><span class="sub">Sub</span>
              </td>
              <td width="120"></td>
              <td width="160"><a title="Continue" href="http://www.yahoo.com">Something</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
4

2 に答える 2

5

行のクリックを確認し、targetターゲットが<a>タグでない場合にのみコードを実行できます。

$(".report tr.title-row").click(function(event) {

    if( ! $(event.target).is('a') ){
        alert('I only fire when A not clicked!');
     }
});
于 2013-01-06T00:26:57.310 に答える
2

行へのイベントのバブリングを停止するだけです

$(".report tr.title-row").click(function() {
    alert('I am firing!');
});

$(".report tr.title-row a").click(function(ev){
    // link clicked
    // so something

    ev.stopPropagation(); // stop triggering the event to the table row
});

ところで...より良いコードのためonに、名前付きイベントハンドラの代わりに使用するだけです

$(".report tr.title-row").on( 'click', function() {
    alert('I am firing!');
});

$(".report tr.title-row a").( 'click', function(ev){
    // link clicked
    // so something

    ev.stopPropagation(); // stop triggering the event to the table row
});
于 2013-01-06T00:22:57.217 に答える