对象上未触发Onclick

Onclick not triggered on objects

本文关键字：Onclick 对象      更新时间：2023-09-26

所以我有一个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事件。是否有一种方法，只触发OnClick事件，当你不点击一个对象(如按钮，图像，href)，但只在表行本身?

我的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但这不是重点，我有额外的代码在里面

谢谢

您需要为这些单击附加一个事件侦听器，并停止传播:

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;
    }
}

由于链接是表格行的一部分，因此当您单击它们时，它们将始终触发表格行的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;
}

就这样做。在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
}

更新为大写标签名称

相关文章：