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

前提:

  • 如下,希望能够点击右边的空白区域也能够响应,而不仅仅是点击文本才响应
    在这里插入图片描述

分析流程

  • 一开始问了chatgpt,但它给的方案太麻烦了,而且还有错误,因此自己上手
  • F12进入调试模式,点击查看最终渲染的html,找到对应的元素如下
    在这里插入图片描述
  • 点击空白处无响应,点击文字才会响应,我意识到layui的点击绑定事件是绑定在layui-tree-txt这个类上的
  • 因此思路就是把这个区域放大,放大到和layui-tree-main的区域一样大
  • 因此最终方案很简单,只需要修改一下css,如下
    在这里插入图片描述
  • 大致意思就是修改最外层的entry的鼠标样式为手型,然后让内部的main和txt的宽度都和父节点一样,即100%
  • 这样点击事件的判定范围就是整个entry,即单个节点的整个范围,包括了右边的空白区域

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/14191.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工作流之节点回退, 回退到上一个节点

工作流审批流程会遇到, 审批不通过, 回退到指定节点, 或者回退到上一个节点. 回退到指定节点, 通过moveTo 实现 回退到上一个节点, 假如当前节点流入得分支有很多, 该如何判断上个节点是谁呢? 上一个节点是谁 根据流程的节点记录判断, 按照时间倒序, 找到上一个办理节点. …

文件外发审核是数据防泄漏的重要手段,那该怎么落地?

企业在日常经营中,无可避免地会产生文件外发的需求,文件发送对象包括但不限于合作方、供应商、客户、公关媒体、慈善组织等等,不一而足。而由于外发的对象不同,所涉及的文件类型也多种多样: 商业合作合同:…

STM32开发学习——使用 Cortex-M3M4M7 故障异常原因与定位(三)

STM32开发学习——使用 Cortex-M3M4M7 故障异常原因与定位(三) 文章目录 STM32开发学习——使用 Cortex-M3M4M7 故障异常原因与定位(三)文档说明:官方参考文档线上链接(可在线阅读与下载)&#…

AWS数据库之Amazon RDS

Amazon RDS 是一种 Web 服务,它让用户能够在云中轻松设置、运行和扩展关系数据库。它在承担耗时的数据库管理任务的同时,又可提供经济高效的可调容量,使您能够腾出时间专注于应用程序和业务。 Amazon RDS - AWS 定价的工作原理

【Python脚本随手笔记】-- 将 “庆余年2” 等信息写入 Txt 文件中

💌 所属专栏:【Python脚本随手笔记】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &#…

《Effective Objective-C 2.0》读书笔记——接口与API设计

目录 第三章:接口与API设计第15条:用前缀避免命名空间冲突第16条:提供“全能初始化方法”第17条:实现description方法第18条:尽量使用不可变对象第19条:使用清晰而协调的命名方式第20条:为私有方…

Altair® Squeak and Rattle Director™ 品质认知度解决方案

Altair Squeak and Rattle Director™ 品质认知度解决方案 借助 Altair 的 Squeak and Rattle Director,计算机辅助工程 (CAE) 的工程专业人士和初学者都能在早期设计阶段快速识别并消除产品中的异响。通过在简化的半自动化流程(已完全集成到 Altair Hy…

【ELK日志收集过程】

文章目录 为什么要使用ELK收集日志ELK具体应用场景ELK日志收集的流程 为什么要使用ELK收集日志 使用 ELK(Elasticsearch, Logstash, Kibana)进行日志收集和分析有多种原因。ELK 堆栈提供了强大、灵活且可扩展的工具集,能够满足现代 IT 系统对…

在Spring Boot中Redis实现事务有哪些方式?

在Spring Boot中操作Redis并实现事务有多种方式,常见的有以下几种: 1. 使用Spring Data Redis的SessionCallback Spring Data Redis提供了SessionCallback接口,允许你在一个会话中执行多个Redis操作,从而实现事务。具体步骤如下…

VMware ESXI 7.0安装部署

1、为什么要虚拟化? 目前,物理服务器存在以下几个问题: 1)硬件资源利用率低; 2)可靠性不足,物理服务器宕机即可造成整体业务停摆; 3)维护量大,无法实现统…

7个常见的SQL慢查询问题及其解决方法

大家好,得益于摩尔定律,计算机性能已大幅提升,加上数据库的进步以及微服务所倡导的各种反模式设计,因此现在编写复杂SQL查询的机会越来越少。业界已经开始提倡不要进行专门的SQL优化,因为节省下来的资源并不足以抵消员…

人工智能的明天:机器学习与自动化的演进之旅

方向一:技术革新与行业应用 现状分析: 当前的IT行业正处于一个技术革新的高峰期。量子计算虽然还处于研究和开发阶段,但其潜力巨大,未来可能在药物发现、材料科学和复杂系统模拟等领域带来突破。虚拟现实(VR&#xff…

JAVA面试题大全(九)

1、为什么要使用 spring? 方便解耦,便于开发支持aop编程声明式事务的支持方便程序的测试方便集成各种优秀的框架降低JavaEE API的使用难度 2、解释一下什么是 aop? AOP 是 Aspect-Oriented Programming 的缩写,中文翻译为“面向…

HTML5表单控件:新时代的交互魔法手册

🚀HTML5表单控件:新时代的交互魔法手册 🎯HTML5表单控件速览:新面孔,新功能1. 日期时间选择器(Date & Time Picker)2. 数字输入框(Number Input)3. 搜索框&#xff0…

argparse.ArgumentParser()用法举例

1. 应用场景 我们在玩深度学习,训练模型的时候,会涉及到很多的参数,这个时候就需要用到argparse.ArgumentParser()方法,它的优点是方便在命令行调用的时候修改参数,为了快速了解该方法的应用,这里举例说明…

如何通过LoadRunner进行全链路压测

LoadRunner是Micro Focus公司开发的一款性能测试工具,广泛应用于企业级应用的性能和负载测试。全链路压测(End-to-End Load Testing)是对整个系统在真实负载下的表现进行测试,涵盖前端、后端和所有中间组件。以下是通过LoadRunner…

深度学习之Tensorflow卷积神经网络手势识别

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手势识别是计算机视觉和人工智能领域的重要应用之一,具有广泛的应用前景&#xff…

日用百货元宇宙 牛奶、羊奶、骆驼奶……到底哪个奶营养价值更高?

如今生活水平高了,奶的营养价值日益受到重视。从开始只有牛奶,到现在市面上羊奶、马奶、骆驼奶……花样变得越来越多。但同时很多疑问也随之而来,到底哪种奶营养价值更高?牛奶、羊奶、马奶……有什么区别? 牛奶&#x…

iOS技术之AFNetworking 将数组作为字段参数传给服务器不成功的两种解决方法

第一种方法 1.在AFNetworking的源码中找到AFURLRequestSerialization这个类; 2.在.m文件中搜索AFQueryStringPairsFromKeyAndValue字段, 找到该方法 else if ([value isKindOfClass:[NSArray class]]) {NSArray *array value;for (id nestedValue in array) …

编曲软件FL Studio如何为自己制作的歌曲编写工程信息 flstudio自带工程在哪

FL Studio有着很多的功能,覆盖面非常广,不管是音色调整、界面个性化还是为工程编写信息,都可以在FL Studio中使用。每个工程文件都有它的各种信息,比如标题名称、作者、音乐类型、工程介绍、创建时间等,编写工程信息能…