layui table怎么阻止复选框点击事件冒泡到行点击

浅宇大大_4502

浅宇大大_4502

2026-11-02

499人浏览

原创

复选框点击不触发行选中需同时加layui-unselect类并阻止冒泡:,且列定义不可配{type: 'checkbox'};更稳妥方案是关闭rowClickToCheck,改用row事件手动判断目标元素并调用setRowChecked控制。

layui table怎么阻止复选框点击事件冒泡到行点击

复选框点击后触发 rowClickToCheck 怎么办

启用了 rowClickToCheck: true 后,点表格任意位置(包括复选框)都会触发行选中——这不是 bug,是 Layui 的设计逻辑:它把整个 tr 当作可点击区域,复选框只是其中一环。真正要解决的不是“阻止冒泡”,而是「让复选框不参与这个机制」。

给复选框加 layui-unselect 类并阻止冒泡

必须同时满足两个条件,缺一不可:

  • —— 这个类是 Layui 内置的“事件豁免标识”,告诉组件别代理该元素的点击
  • 在 checkbox 的 click 事件里手动调 event.stopPropagation(),防止透传到 tr
  • 列定义中不要配 {type: 'checkbox'},否则 Layui 会自动接管并忽略 layui-unselect

示例模板写法:

<td><input type="checkbox" class="layui-unselect" onclick="event.stopPropagation()"></td>

为什么只加 layui-unselect 不够

因为 rowClickToCheck 是在 tr 级监听原生 click,而 layui-unselect 只影响 Layui 自己的事件代理(比如表单渲染、自动勾选逻辑),不影响原生冒泡路径。所以即使加了类,不显式 stopPropagation(),点击 checkbox 仍会冒泡触发行事件。

常见错误写法:
—— 缺少 onclick="event.stopPropagation()",必踩坑
—— 混用 Layui 内置 checkbox 类型,会覆盖自定义行为

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

更稳妥的做法:关掉 rowClickToCheck,改用 row 事件手动控制

如果你需要精细控制哪些区域能触发选中(比如只允许点文字单元格,排除操作列、复选框列),直接禁用 rowClickToCheck,改走 table.on('row(filter)') 监听,再手动判断 e.target:

  • 检查 e.target 是否为 input[type="checkbox"] 或其父级容器
  • 用 $(e.target).closest('td[data-field="operation"]').length 排除操作列
  • 对合法区域调用 obj.setRowChecked({checked: true}) 显式控制状态

这样逻辑完全可控,也不依赖 layui-unselect 的隐式行为。

真正容易被忽略的是:layui-unselect 不是万能开关,它只切断 Layui 的二次封装,原生 DOM 冒泡照常发生;而 rowClickToCheck 正是靠原生冒泡工作的——所以必须双管齐下。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

2026.11.02

0

14

Uvicorn使用教程
Uvicorn使用教程

本专题汇总了Uvicorn使用教程与启动运行指南,涵盖其作为Python ASGI服务器的定位与特点,以及命令行启动(uvicorn main:app --reload)、参数配置(host/port/workers)、程序内嵌运行与Gunicorn结合部署等核心用法。同时整理了热重载调试、日志配置与生产环境部署优化等技巧,助你快速掌握Uvicorn的运行与配置。

2026.11.02

0

17

Uvicorn安装配置教程
Uvicorn安装配置教程

本专题汇总了Uvicorn的安装配置教程与部署指南,涵盖通过pip安装Uvicorn、启动FastAPI/Starlette应用、开发模式热重载(--reload)及多进程工作模式配置等核心操作。同时整理了结合Gunicorn的生产部署方案、HTTPS与反向代理配置及性能调优技巧,助你快速完成Uvicorn服务的安装与上线部署。

2026.11.02

0

17

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

100

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

80

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

240

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

140

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

140

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

100

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习