推荐用事件委托而非onclick:给table绑定click事件,通过data-href属性获取跳转地址,判断target是否为td/th且左键点击,再用location.assign()跳转;注意路径写法和事件冒泡控制。

表格行点击跳转用 onclick 还是事件委托?
直接在每行加 onclick 属性最简单,但动态生成的表格或频繁增删行时会出问题——新插入的 <tr> 没绑定事件,且内联脚本难维护。推荐用事件委托:给 <code><table> 绑监听,判断点击目标是否为 <code><tr>。
<ul><li>确保 <code><tr> 有 <code>data-href 属性存跳转地址,比如 <tr data-href="detail.html?id=123">
<li>排除点击 <code><input>、<button></button> 等可交互子元素时触发跳转,加 event.target.matches('td, th') 判断
event.button === 0
window.location.href 和 location.assign() 选哪个?
两者都可行,但行为有细微差别:window.location.href = url 是赋值操作,可被浏览器后退缓存;location.assign(url) 更语义明确,且在某些旧版 Safari 中兼容性略好。不建议用 window.open(),除非真要新开窗口。
- 跳转前可加校验,比如
if (href && href.startsWith('http'))防 XSS - 若需保留当前页(如后台管理列表),用
location.replace(url)替换历史记录,避免用户点返回回到原列表页 - 注意:跳转后 JS 不再执行,所有清理逻辑(如取消加载动画)必须放在跳转前
为什么点击后页面空白或 404?常见路径问题
跳转失败多数因 data-href 值写错,尤其相对路径处理不当。浏览器解析 data-href 时以当前 HTML 文件所在目录为基准,不是以 JS 文件位置为准。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- 绝对路径最稳:以
/开头,如data-href="/user/profile?id=5" - 相对路径慎用:若 HTML 在
/admin/list.html,data-href="edit.html"解析为/admin/edit.html,而非根目录下的/edit.html - 避免拼接错误:不要手动拼
window.location.origin + data-href,可能重复协议或域名
移动端点击有延迟?需要阻止默认行为吗?
不需要阻止默认行为,click 事件本身无延迟。所谓“300ms 延迟”只影响 touchstart,而现代浏览器对 click 已优化。但要注意:如果表格行内有 <a></a> 标签,点击 <a></a> 会先触发自身跳转,再触发行跳转,造成冲突。
- 方案一:移除行内所有
<a></a>,改用span+ CSS 伪类模拟链接样式 - 方案二:在事件监听里加
if (event.target.tagName === 'A') return提前退出 - 真要支持 touch 反馈,给
tr加cursor: pointer和:active样式即可,无需 JS
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










