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,一经查实,立即删除!

相关文章

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

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

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

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

【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 系统对…

VMware ESXI 7.0安装部署

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

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

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

JAVA面试题大全(九)

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

argparse.ArgumentParser()用法举例

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

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

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

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

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

Vue前端项目打包,并部署Vue项目到Linux云服务器上

一. vue前端项目打包 1.使用vscode开发项目 2.在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号,因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。 如图所示: 3.在config目录下的index.js文件当中要改assetsPu…

Linux配置nginx代理功能

ywtool运维工具下载链接及介绍: 工具下载/介绍/安装页面 目录 一.nginx proxy功能介绍二.配置nginx proxy功能2.1 新增nginx代理配置2.1.1 反向代理(当前只举例https转https)2.1.2 负载均衡(当前只举例https转https) 2.2 修改nginx代理配置2.2.1 手动修改配置文件2.2.2 通过此脚…

U盘文件神秘失踪?别担心,恢复与预防攻略在此!

一、遭遇困境:U盘文件突然不见 在数字时代,U盘已成为我们日常工作中不可或缺的数据存储工具。然而,有时我们可能会遭遇一个令人头疼的问题——U盘中的文件突然不见了。这种情况往往让人措手不及,尤其是对于那些没有备份重要文件的…

Gitlab OpenSSL::Cipher::CipherError(gitlab修改项目500错误)

问题描述 在对 gitlab 进行项目修改保存时候&#xff0c;出现了 500 错误&#xff0c;经查看日志&#xff0c;发现 OpenSSL::Cipher::CipherError 异常&#xff0c;如下图所示&#xff1a; > /var/log/gitlab/gitlab-rails/production.log <OpenSSL::Cipher::CipherErro…

“深度解析:等级保护测评的核心要素与实施流程“

等级保护测评的核心要素与实施流程是确保信息系统安全的重要环节。以下是对等级保护测评的核心要素和实施流程的深度解析&#xff1a; 核心要素 等级测评概述 1 等级测评是依据国家信息安全等级保护制度规定&#xff0c;对信息系统的安全状况进行检测评估&#xff0c;判定系统…

【Hive SQL 每日一题】行列转换

文章目录 行转列列传行 行转列 测试数据&#xff1a; DROP TABLE IF EXISTS student_scores;CREATE TABLE student_scores (student_id INT,subject STRING,score INT );INSERT INTO student_scores (student_id, subject, score) VALUES (1, Math, 85), (1, English, 78), (…

5月23日学习记录

[CSAWQual 2019]Unagi 涉及&#xff1a;xxe漏洞&#xff0c;外来编码xml绕过 打开环境&#xff0c;发现存在文件上传 简单上传一个php 毫无疑问上传失败&#xff0c;说是存在waf&#xff0c;绕过waf才能上传&#xff0c;点击here看看 xml编码&#xff0c;可能存在xxe漏洞&…

【计算机毕业设计】基于SSM++jsp的网上服装销售系统【源码+lw+部署文档】

目录 第一章 绪 论 第二章 关键技术的研究 2.1 JSP技术介绍 2.2 JAVA简介 2.3 ECLIPSE 开发环境 2.4 Tomcat服务器 2.5 MySQL数据库 第三章 系统分析 3.1 系统设计目标 3.2 系统可行性分析 3.3 系统功能分析和描述 3.4系统UML用例分析 3.4.1管理员用例 3.4.2用户用例 3.5系统流…