Question

所以我有一个包含X行的表。我有以下HTML代码：

<tr id='row1' onClick="FormTRClick('1')"><td><a href='#'>Bla</a></td></tr>
<tr id='row2' onClick="FormTRClick('2')"><td><a href='#'>Bla</a></td></tr>
<tr id='row3' onClick="FormTRClick('3')"><td><a href='#'>Bla</a></td></tr>
<tr id='row4' onClick="FormTRClick('4')"><td><a href='#'>Bla</a></td></tr>

现在，当您单击超链接'Bla'时，您将也激活OnClick事件。有没有办法只在不点击对象（如button，image，href）时才触发OnClick事件，而只是在表行本身上？

我的FormTRClick（）函数如下所示：

function FormTRClick(ctrl) {
   if (document.getElementById('chk' + ctrl).checked == true) {
    document.getElementById('chk' + ctrl).checked = false;
   } else {
    document.getElementById('chk' + ctrl).checked = true;
   }
}

我知道我也可以使用逆document.getElementById('chk' + ctrl).checked = !document.getElementById('chk' + ctrl).checked，但这不是重点，我在那里有额外的代码。

由于

Answer 1

您需要为这些点击附加一个事件监听器，并停止传播：

https://developer.mozilla.org/en/DOM/event.stopPropagation

或者，您可以检查目标元素：

HTML：

<tr id='row1' onClick="FormTRClick(event, '1')"><td><a href='#'>Bla</a></td></tr>
<tr id='row2' onClick="FormTRClick(event, '2')"><td><a href='#'>Bla</a></td></tr>
<tr id='row3' onClick="FormTRClick(event, '3')"><td><a href='#'>Bla</a></td></tr>
<tr id='row4' onClick="FormTRClick(event, '4')"><td><a href='#'>Bla</a></td></tr>

使用Javascript：

function FormTRClick(event, ctrl) {
    if (event.target.tagName != 'A' && document.getElementById('chk' + ctrl).checked == true) {
        document.getElementById('chk' + ctrl).checked = false;
    } else {
        document.getElementById('chk' + ctrl).checked = true;
    }
}

Answer 2

由于链接是表格行的一部分，因此当您点击它们时，它们将始终触发表格行的onclick。

有一个简单的解决方法，但是......

<tr id='row1' onClick="FormTRClick('1');"><td><a href='#' onmouseover="linkOver();" onmouseout="linkOut();">Bla</a></td></tr>

...还有一些javascript ......

var linkIsOver = false;

function FormTRClick(ctrl) {
  if (!linkIsOver) {
    if (document.getElementById('chk' + ctrl).checked == true) {
      document.getElementById('chk' + ctrl).checked = false;
    } else {
      document.getElementById('chk' + ctrl).checked = true;
    }
  }
}

function linkOver () {
  linkIsOver = true;
}
function linkOut () {
  linkIsOver = false;
}

Answer 3

就这样做。在HTML中：

<tr id='row1' onClick="FormTRClick(this, '1')"><td><a href='#'>Bla</a></td></tr>

在JS中：

function FormTRClick(elem, ctrl) {
    if (elem.tagName != 'TR') return;
    //do what you need
}

以大写标记名称更新

Onclick未在对象上触发

3 个答案: