Onclick沒有在對象上觸發

所以我有一個X行的表格。我有以下的HTML代碼：Onclick沒有在對象上觸發

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

現在，當你點擊超鏈接「布拉」你會也激活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但是這不是重點，我有額外的代碼在那裏。

感謝

來源

2011-08-16 Devator

你要一個事件偵聽器附加到這些點擊，並停止傳播史：

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

來源

2011-08-16 09:55:31

謝謝。如果event.target.tagName是TD，我已經改變了部分。作品最好！ – Devator

我剛剛發現它在IE中不起作用，我得到以下錯誤： ''target.tagName'爲空或不是對象'。我試過使用nodeName而不是tagName，但無濟於事。 – Devator

問題不在於'tagName'。這是IE瀏覽器不做'目標'。爲IE使用'event.srcElement'。 http://msdn.microsoft.com/en-us/library/ms534638(v=vs.85).aspx –

所以那樣做。在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 
}

由大寫TAG名已更新

來源

2011-08-16 09:57:51

點擊鏈接仍然會觸發事件並傳遞表格行，因爲鏈接是表格行的一部分... – DaveRandom

是的，Dave是對的。不幸的是，它仍然在激活onClick活動。 – Devator

由於鏈接的表格行的一部分，他們總是會觸發的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; 
}

來源

2011-08-16 09:59:40 DaveRandom

這個解決方案可以工作，但這不是一個很好的方法。我接受了約瑟夫的回答，因爲他很乾淨。 – Devator

Onclick沒有在對象上觸發

回答

相關問題