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

前提:

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

分析流程

  • 一开始问了chatgpt,但它给的方案太麻烦了,而且还有错误,因此自己上手
  • F12进入调试模式,点击查看最终渲染的html,找到对应的元素如下
  • 点击空白处无响应,点击文字才会响应,我意识到layui的点击绑定事件是绑定在layui-tree-txt这个类上的
  • 因此思路就是把这个区域放大,放大到和layui-tree-main的区域一样大
  • 因此最终方案很简单,只需要修改一下css,如下
  • 大致意思就是修改最外层的entry的鼠标样式为手型,然后让内部的main和txt的宽度都和父节点一样,即100%
  • 这样点击事件的判定范围就是整个entry,即单个节点的整个范围,包括了右边的空白区域
相关推荐
有诺千金32 分钟前
VUE3入门很简单(4)---组件通信(props)
前端·javascript·vue.js
2501_9447114333 分钟前
Vue-路由懒加载与组件懒加载
前端·javascript·vue.js
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “心流之泉”——在碎片洪流中,为你筑一眼专注的清泉
开发语言·前端·flutter·交互
换日线°1 小时前
前端3D炫酷展开效果
前端·3d
广州华水科技1 小时前
大坝变形监测的单北斗GNSS技术应用与发展分析
前端
Dontla1 小时前
浏览器localStorage共享机制介绍(持久化客户端存储方案)本地存储冲突、iframe、XSS漏洞、命名空间隔离
前端·网络·xss
●VON1 小时前
React Native for OpenHarmony:构建高性能、高体验的 TextInput 输入表单
javascript·学习·react native·react.js·von
●VON1 小时前
React Native for OpenHarmony:ActivityIndicator 动画实现详解
javascript·学习·react native·react.js·性能优化·openharmony
霍理迪1 小时前
JS其他常用内置对象
开发语言·前端·javascript
tao3556672 小时前
HTML-03-HTML 语义化标签
前端·html