LayUI使用(一)点击树组件的右边空白区域也可响应事件

前提:

  • 如下,希望能够点击右边的空白区域也能够响应,而不仅仅是点击文本才响应

分析流程

  • 一开始问了chatgpt,但它给的方案太麻烦了,而且还有错误,因此自己上手
  • F12进入调试模式,点击查看最终渲染的html,找到对应的元素如下
  • 点击空白处无响应,点击文字才会响应,我意识到layui的点击绑定事件是绑定在layui-tree-txt这个类上的
  • 因此思路就是把这个区域放大,放大到和layui-tree-main的区域一样大
  • 因此最终方案很简单,只需要修改一下css,如下
  • 大致意思就是修改最外层的entry的鼠标样式为手型,然后让内部的main和txt的宽度都和父节点一样,即100%
  • 这样点击事件的判定范围就是整个entry,即单个节点的整个范围,包括了右边的空白区域
相关推荐
再学一点就睡6 分钟前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20208 分钟前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象8 分钟前
flutter第二话题-布局约束
前端
龙在天10 分钟前
我是前端,scss颜色函数你用过吗?
前端
Mapmost17 分钟前
单体化解锁3DGS场景深层交互价值,让3DGS模型真正被用起来!
前端
幻灵尔依1 小时前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子1 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳1 小时前
CSS 基础概念
前端·css·css3
前端小巷子1 小时前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar1 小时前
AI教你常识之 npm / pnpm / package.json
前端