V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
andybest
V2EX  ›  问与答

前端问题,HTML 页面中的 table.tr 使用 onclick 后点击 tr 中的 a.href 会弹出两个页面的问题

  •  
  •   andybest · 2014-03-30 12:28:02 +08:00 · 8858 次点击
    这是一个创建于 3890 天前的主题,其中的信息可能已经有所发展或是发生改变。
    例子:
    <table>
     <tr onclick="location.href='/test';">
      <td>a</td>
      <td><a href="/test">test</a></td>
      <td>b</td>
     </tr>
    </table>

    本来没有 onclick="location.href='/test';" 但我想实现点击该 tr 的任何位置都会进入 /test 所以增加了 tr.onclick
    现在的问题是,在手机浏览器中点击文本链接:
    <a href="/test">test</a>
    会一次弹出两个窗口(因为一个激发了文本链接 a.href ,一个激发了 tr.onclick)

    虽然 PC 浏览器没有这个问题,但这种实现方法仍然感觉不合理
    怎么解决这个问题比较合适?
    8 条回复    1970-01-01 08:00:00 +08:00
    zorceta
        1
    zorceta  
       2014-03-30 12:33:25 +08:00 via Android   ❤️ 1
    event.target
    见MDN
    ETiV
        2
    ETiV  
       2014-03-30 12:47:02 +08:00 via iPhone
    禁用 tr 下 a 标签的 onclick 事件冒泡
    andybest
        3
    andybest  
    OP
       2014-03-30 12:58:41 +08:00
    @zorceta 谢谢,但 IE 下没有 event.target,我用 event.srcElement 是一样事吧

    @ETiV 似乎是先触发 onclick 后触发 a.href 的吧?
    zorceta
        4
    zorceta  
       2014-03-30 13:05:48 +08:00 via Android
    @andybest IE用什么不知道,反正大概思路就是拿到事件的处罚者,如果是a就preventDefault()
    ETiV
        5
    ETiV  
       2014-03-30 13:06:19 +08:00 via iPhone
    onclick 别 return false
    zorceta
        6
    zorceta  
       2014-03-30 13:09:39 +08:00 via Android
    @zorceta 触发-_-#
    @ETiV 在tr的onclick里return true?
    ETiV
        7
    ETiV  
       2014-03-30 13:13:22 +08:00 via iPhone   ❤️ 2
    @zorceta a 别return false,就能打开a的href。
    a里面取消事件冒泡,tr 就收不到onclick了。

    tr 随意
    mikuazusa
        8
    mikuazusa  
       2014-03-30 13:15:35 +08:00   ❤️ 1
    <a onclick="return false;" href="/test">test</a></td>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2485 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 01:14 · PVG 09:14 · LAX 17:14 · JFK 20:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.