可点击表格单元中的链接问题
[英]Link in clickable table cell issue
问题描述
I have a clickable cell with a link inside it, something like the following: 
我有一个可点击的单元格，其中带有链接，如下所示：
<html><body>
<table><tr><td onclick="alert('Cell click event fired.');">
Blah blah blah
<a href="#" onclick="alert('Link click event fired.'); return false;">Here</a>
</td></tr></table>
</body></html>
The problem is when I click on the link both onclick events fire. 问题是当我单击链接时，两个onclick事件都会触发。 How do I prevent this from happening? 如何防止这种情况发生？
EDIT: 编辑：
A jQuery solution is acceptable if someone can give me an example of how to do that. 如果有人可以给我一个如何做到这一点的示例，那么jQuery解决方案是可以接受的。
3 个解决方案
解决方案1
2 已采纳 2011-01-25 22:47:36
You need to stop propagation of the event. 您需要停止事件的传播。
EDIT: Since you asked about jQuery, you could delete the inline onclick attributes and assign the handlers like this: 编辑：由于您询问了有关jQuery的信息，因此可以删除内联onclick属性并分配如下处理程序：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('table td').click( doSomething )
.find('a').click( doSomethingElse );
function doSomething() {
alert('something');
}
function doSomethingElse(e) {
alert('somethingElse');
return false; // prevent default behavior and bubbling on the <a>
}
});
</script>
Note that this will assign click events to every <td> and their descendant <a> elements. 请注意，这会将点击事件分配给每个 <td>及其后代<a>元素。 You'll need to provide more specific markup for a more specific solution. 您需要为更具体的解决方案提供更具体的标记。
And don't forget to import the jQuery library before your code. 并且不要忘记在代码之前导入jQuery库。
To do this in a cross-browser compatible manner, do this: 要以跨浏览器兼容的方式执行此操作，请执行以下操作：
Example: http://jsfiddle.net/7u9Jg/1/ 示例： http ： //jsfiddle.net/7u9Jg/1/
<a href="#test" onclick="doSomethingElse(event);">Here</a>
function doSomething() {
alert('something');
}
function doSomethingElse(e) {
// make sure the event doesn't bubble
if( e ) e.stopPropagation(); // W3C Compatible
else window.event.cancelBubble = true; // IE Compatible
alert('somethingElse');
}
解决方案2
1 2011-01-25 22:35:31
The "inner" element should be set up such that the handler returns
false :
应该设置“内部”元素，以便处理程序返回
false ：
Blah blah blah <a href="#" onclick="doSomethingElse(); return false;">Here</a>
That will prevent the default "bubbling" of the event up through the DOM.
这样可以防止事件默认通过DOM冒泡。
(It'll also prevent the default behavior for the
<a> tag, which in this case is nothing anyway.)
（这也将防止
<a>标记的默认行为，在这种情况下，它什么也没有。）
You can also do this by calling the ".preventDefault()" method on the event object from within the handler, but you'd have to change more code to do that, and it doesn't seem worth it (here).
您也可以通过在处理程序中对事件对象调用“ .preventDefault（）”方法来执行此操作，但是您必须更改更多代码才能执行此操作，并且这样做似乎不值得（在此处）。
I do this a lot, seems like :-) Anyway, returning false does definitely prevent default action, but it doesn't cancel bubbling. 我经常这样做，似乎是:-)无论如何，返回false肯定会阻止默认操作，但不会取消冒泡。 To do that the handler can call ".stopPropagation()" (or in old IE browsers set the "cancelBubble" flag on the event object, or something like that). 为此，处理程序可以调用“ .stopPropagation（）”（或在旧的IE浏览器中，在事件对象上设置“ cancelBubble”标志，或类似的东西）。 However to do that you have to register your event handlers differently (well you might not have to, but I don't recall the trick necessary to get at the event object with in-line handler code.) 但是，要做到这一点，您必须以不同的方式注册事件处理程序（当然，您可能不必这样做，但是我不记得使用内联处理程序代码获取事件对象所必需的技巧。）
I really hate answering questions by plugging frameworks, but event handling (and dealing with the vagaries of all the different browsers) is one of the things I happily delegate to a framework; 我真的很讨厌通过插入框架来回答问题，但是事件处理（以及处理所有不同浏览器的变化）是我很乐意委托给框架的事情之一； almost anything you choose is going to make event handling easier and more reliable. 您选择的几乎任何东西都将使事件处理变得更容易，更可靠。
解决方案3
0 2011-01-25 22:37:10
Isn't that what you want? 那不是你想要的吗？ By including your onclick event in the <td> as well, you're telling the browser to do exactly that.. can you consolidate the code you need into your <a> onclick? 通过将您的onclick事件也包含在<td>中，您就是在告诉浏览器做到这一点。.您可以将所需的代码整合到<a> onclick中吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.