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

p8ekf7hl  于 2022-12-18  发布在  jQuery
关注(0)|答案(3)|浏览(137)

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

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

dbf7pr2w

dbf7pr2w1#

您需要停止事件的传播。

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

注意,这将把click事件分配给 every<td>及其后代<a>元素,您需要为更具体的解决方案提供更具体的标记。
不要忘记在导入代码之前 * 导入jQuery库。
要以跨浏览器兼容的方式执行此操作,请执行以下操作:

示例:http://jsfiddle.net/7u9Jg/1/

x一个一个一个一个x一个一个二个x

xtfmy6hx

xtfmy6hx2#

应设置“inner”元素,以便处理程序返回false

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

这将防止事件通过DOM的默认“冒泡”。(它还将防止<a>标记的默认行为,在本例中它什么也不是。)
您也可以通过在处理程序中调用事件对象上的. preventDefault()方法来实现这一点,但您必须更改更多代码才能实现这一点,而且似乎不值得(在此)。
我经常这样做,看起来像:-)无论如何,返回false确实可以防止默认操作,但它不能取消冒泡。要做到这一点,处理程序可以调用.stopPropagation()(或在旧IE浏览器中设置事件对象上的“cancelBubble”标志,或类似的东西)。然而,要做到这一点,您必须以不同的方式注册您的事件处理程序(嗯,您可能没有 * 必须 *,但我不记得使用内联处理程序代码获得事件对象所必需的技巧。)
我真的很讨厌通过插入框架来回答问题,但是事件处理(以及处理所有不同浏览器的变幻莫测)是我乐意委托给框架的事情之一;几乎你所选择的任何东西都会使事件处理更容易和更可靠。

qzwqbdag

qzwqbdag3#

这难道不是你想要的吗?通过在<td>中包含onclick事件,你就是在告诉浏览器去做这件事..你能把你需要的代码合并到你的<a> onclick中吗?

相关问题