V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
andybest
V2EX  ›  问与答

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

  •  
  •   andybest · Mar 30, 2014 · 9245 views
    This topic created in 4419 days ago, the information mentioned may be changed or developed.
    例子:
    <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 replies    1970-01-01 08:00:00 +08:00
    zorceta
        1
    zorceta  
       Mar 30, 2014 via Android   ❤️ 1
    event.target
    见MDN
    ETiV
        2
    ETiV  
       Mar 30, 2014 via iPhone
    禁用 tr 下 a 标签的 onclick 事件冒泡
    andybest
        3
    andybest  
    OP
       Mar 30, 2014
    @zorceta 谢谢,但 IE 下没有 event.target,我用 event.srcElement 是一样事吧

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

    tr 随意
    mikuazusa
        8
    mikuazusa  
       Mar 30, 2014   ❤️ 1
    <a onclick="return false;" href="/test">test</a></td>
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   847 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 22:38 · PVG 06:38 · LAX 15:38 · JFK 18:38
    ♥ Do have faith in what you're doing.