Javascript 可点击表格单元格问题中的链接_Javascript_Jquery_Javascript Events

Javascript 可点击表格单元格问题中的链接

javascript jquery

Javascript 可点击表格单元格问题中的链接,javascript,jquery,javascript-events,Javascript,Jquery,Javascript Events,我有一个可点击的单元格，里面有一个链接，如下所示： <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><

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

<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解决方案是可以接受的。

应该设置“内部”元素，以便处理程序返回

false

：

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

废话废话

这将防止事件在DOM中的默认“冒泡”。（它还将阻止

标记的默认行为，在本例中，该标记无论如何都不是。）

您也可以通过在处理程序中调用事件对象上的“.preventDefault（）”方法来实现这一点，但您必须更改更多代码才能做到这一点，而这似乎不值得（此处）

我经常这样做，看起来像：-）无论如何，返回

false

肯定会阻止默认操作，但不会取消冒泡。为此，处理程序可以调用“.stopPropagation（）”（或者在旧的IE浏览器中，在事件对象上设置“cancelBubble”标志，或者类似的东西）。但是，要做到这一点，您必须以不同的方式注册事件处理程序（您可能不必注册，但我不记得使用内嵌处理程序代码获取事件对象所需的技巧）

我真的很讨厌通过插入框架来回答问题，但事件处理（以及处理所有不同浏览器的变化无常）是我乐意委托给框架的事情之一；您选择的几乎任何东西都将使事件处理变得更简单、更可靠。

这不是您想要的吗？通过将onclick事件也包括在

中，您告诉浏览器要做的正是这一点。。能否将所需的代码整合到

onclick中？

您需要停止事件的传播

EDIT:因为您询问了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>

那么，

onlick

事件到底做了什么？…或者我应该说触发“onlick”需要做什么；o）您确定

返回false防止冒泡？它在jQuery中有，但我不认为它在库之外有。据我所知，这是一个Javascript/DOM事件处理工具。我可以装配一个JSFIDLE并查看…@Pointy：查看我上面更新的评论。我举了一个例子。我很确定返回false只阻止默认行为。嗯@patrick它似乎确实阻止了默认处理，但我不确定它是否停止冒泡。。。仍然试图确保我没有做一些愚蠢的事情：-@Spencer Ruport当您通过jQuery方法设置事件处理程序时，它的代码将遵守false
返回值约定。它还为事件处理程序提供了一个“改进的”事件对象，该对象具有跨浏览器的可靠版本的“preventDefault”和“stopPropagation”功能。锚定标记可能会缠绕在一些小的内嵌小工具上，比如脚本驱动的页面更新，而整个单元格可能会做不同的事情。也许在数字字段上考虑“UP”和“向下”按钮。当然，我不知道在这种情况下：-）那么@patrick dw是否总是可以作为为内联处理程序代码自动构建的函数实例（或粗略等效）的参数名使用？jQuery是否有一种简单的方法可以处理这种情况？我也会接受这个答案。应该是。我没有做过大量的测试，但是内联处理程序只是包装在一个匿名函数中，该函数被分配给onclick
属性。支持事件参数的浏览器应该在分配的函数中设置它，因此内联调用会选择它。啊，太棒了，我没有意识到jQuery所做的仅仅是通过click（）调用将函数绑定到事件。谢谢。：）@斯宾塞：是的，就这些。它也不需要是命名函数。你可以传递一个匿名函数，但我相信命名你的函数o）
<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');
}