Question

我有一个可点击的单元格，里面有一个链接，如下所示：

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

问题是，当我点击链接时，两个onclick事件都会触发。我该如何防止这种情况发生？

修改

如果有人能给我一个如何做到这一点的例子，那么jQuery解决方案是可以接受的。

Answer 1

您需要停止传播事件。

编辑：由于您询问了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>

请注意，这会将点击事件分配给每个 <td>及其后代<a>元素。您需要为更具体的解决方案提供更具体的标记。

不要忘记在代码之前导入jQuery库。

要以跨浏览器兼容的方式执行此操作，请执行以下操作：

示例： 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'); }

Answer 2

~~应该设置“inner”元素，使得处理程序返回false：~~

Blah blah blah <a href="#" onclick="doSomethingElse(); return false;">Here</a>

这将阻止事件通过DOM进行默认的“冒泡”。（它还会阻止<a>标记的默认行为，在这种情况下无论如何都是无效的。）

你也可以通过在处理程序中调用事件对象上的“.preventDefault（）”方法来完成此操作，但是你必须更改更多的代码才能做到这一点，并且它不会看起来不值得（这里）。

我做了很多，好像是:-)无论如何，返回false肯定会阻止默认操作，但它不会取消冒泡。要做到这一点，处理程序可以调用“.stopPropagation（）”（或在旧的IE浏览器中设置事件对象上的“cancelBubble”标志，或类似的东西）。但是要做到这一点，你必须以不同的方式注册你的事件处理程序（你可能没有有，但我不记得使用内联处理程序代码获取事件对象所需的技巧。）

我真的很讨厌通过插入框架来回答问题，但事件处理（以及处理所有不同浏览器的变幻无常）是我乐意委托给框架的事情之一;几乎所有你选择的东西都会使事件处理更容易，更可靠。

Answer 3

这不是你想要的吗？通过在<td>中包含您的onclick事件，您告诉浏览器确实这样做了......您能否将所需的代码整合到<a> onclick中？

链接可点击表格单元格问题

3 个答案: