微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

用DIV遮罩解决鼠标直接勾选checkbox无效的问题_HTML/Xhtml_网页制作

php中文网
发布： 2016-05-16 16:37:04
原创
1588人浏览过

在前端开发的过程中，遇到一种情况，需要勾选，为了用户的操作便捷就将click事件放到了DIV上。（其中使用了knockout.js）

代码大概如下：

ClipDrop
ClipDrop

Stability.AI出品的图片处理系列工具（背景移除、图片放大、打光）

ClipDrop 112
查看详情 ClipDrop
复制代码
代码如下:


有事请勾我


但是这样写出现了一个奇怪的现象，鼠标点击div一切正常。

但鼠标直接勾选checkbox不正常：

checkbox处于未勾选状态，鼠标直接点击checkbox勾选，此时应该实现是：1、执行div的clickevent事件；2、事件执行完毕后，checkbox处于勾选状态。

但最终的结果却是，checkbox仍然处于未勾选状态。

跟踪调试结果是，在执行完clickevent事件时，checkbox还是处于勾选状态，但clickevent执行完后，接着进入jquery的代码执行，走了两三步后，checkbox即被改成未选中状态。

原因至今未查到。（另外一个地方使用的radiobox也有类似的情况）

没办法，只能变通一下，通过在checkbox上面覆盖一层div，让鼠标点击的时候点的是div而不是checkbox，通过clickevent改变checkbox状态（clickevent事件中本来就有改变checkbox状态的代码）

实现如下：

复制代码
代码如下:




有事请勾我



ID为two和three的两个div，设置时关键是需要设置两个属性：position:absolute; z-index:1;

其中上面那层的div的z-index属性要比在下面那层的div大。

以上DIV的ID属性只是为了说明，一般程序中使用class属性设置。

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：用CSS对TD中INPUT的宽度设置_HTML/Xhtml_网页制作 下一篇：用jquery进行修复在iframe下的页面锚点失效问题_HTML/Xhtml_网页制作
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML表单数据怎么获取_HTML表单提交后后台获取数据的方法 表单提交后后台获取数据的关键是选择GET或POST方法并确保服务器正确解析请求。1.GET方法将数据附加在URL后，适合少量非敏感信息；POST方法将数据放在请求体中，更安全，适合大量或敏感数据。2.不同后端语言通过特定方式获取数据：PHP使用$_GET或$_POST超全局变量；Node.js需借助express.urlencoded()中间件解析表单；PythonFlask通过request.form获取；JavaServlet使用request.getParameter()方法。3.前端需注
2025-11-22 14:18:06
397
使用Flexbox优化导航栏布局：解决元素挤压问题 本文旨在解决导航栏元素布局混乱、挤压的问题。通过引入CSSFlexbox布局模型，我们将展示如何利用display:flex、gap属性以及margin-left:auto等技巧，实现导航项的水平排列、均匀间隔和特定元素靠右对齐。此方法提供了一种现代化且响应式的解决方案，显著提升导航栏的可维护性和布局灵活性，同时提醒在集成复杂动画时需注意调整。
2025-11-22 13:37:02
436
PHP ArgumentCountError 解决方案：正确定义与调用类方法 本文旨在解决PHP开发中常见的ArgumentCountError:Toofewarguments错误，特别是当类方法（如获取器getter）在定义时错误地包含了不必要的参数，而在调用时未提供这些参数导致的问题。我们将深入分析错误原因，并提供简洁有效的解决方案，通过优化方法签名来确保代码的正确性和健壮性。
2025-11-22 13:36:27
958
JavaScript在浏览器控制台实现列表项悬停与动态按钮点击自动化 本教程详细阐述如何在浏览器控制台中，利用JavaScript模拟用户行为，对动态生成的列表项按钮进行自动化悬停和点击操作。文章将涵盖dispatchEvent模拟鼠标事件、jQuery的.click()方法触发按钮、以及async/await和setTimeout实现异步操作时序控制的关键技术，帮助开发者高效处理第三方网站UI交互。
2025-11-22 13:32:02
796
在后端将HTML渲染为图像并转换为Base64字符串的教程 本教程旨在解决在后端环境中将动态HTML（包含CSS样式）渲染为图像，并将其转换为Base64字符串以便嵌入电子邮件或其他场景的需求。文章将深入探讨现有方法的局限性，并重点介绍如何利用Puppeteer-Sharp这一强大的无头浏览器库，实现高效、准确且免费的HTML到图像转换，并提供详细的C#代码示例和最佳实践。
2025-11-22 13:30:23
605
利用SCSS @extend 优化Bootstrap响应式列定义 本文深入探讨了如何利用SCSS的@extend指令，高效管理Bootstrap的响应式列类，从而避免在HTML中重复声明col-lg-*和col-md-*等类。通过将Bootstrap的实用类扩展到自定义CSS类中，开发者可以简化HTML结构、提高代码可读性和维护性，同时充分利用Bootstrap内置的响应式逻辑，无需手动编写复杂的媒体查询，实现更优雅的前端开发工作流。
2025-11-22 13:26:54
984
CSS实现文本垂直显示与旋转：从底部到顶部排版技术 本教程深入探讨了在网页中实现文本从底部到顶部垂直显示的技术。我们将详细介绍两种主要的CSS方法：一是利用transform属性进行精确的旋转和定位，包括rotate、translateX和transform-origin；二是结合writing-mode实现垂直排版，并通过transform:scale()进行翻转以达到从底部到顶部的效果。文章将提供详细的代码示例和注意事项，帮助开发者根据实际需求选择最合适的解决方案。
2025-11-22 13:24:21
186
Flexbox布局实践：实现图片与多段文本的优雅并排显示 本教程详细指导如何利用Flexbox将图片与多段文本内容并排布局。通过优化HTML容器结构，引入一个共同的Flex父容器，并合理设置子元素的Flex属性与宽度，即使面对复杂的文本内容和固定尺寸图片，也能实现精确且响应式的对齐效果。文章将通过具体代码示例，展示如何避免常见陷阱，并提供最佳实践建议。
2025-11-22 13:22:19
679
JavaScript：在循环中为动态内容生成序列号 本文详细介绍了如何在JavaScript的for循环中为动态生成的数组或列表项添加唯一的序列号。通过利用循环变量i，我们能够轻松实现对每个输出结果进行编号，例如将‘City#1’、‘City#2’等格式化输出，从而提升用户界面的可读性和数据呈现的清晰度，适用于处理表单输入或列表渲染等场景。
2025-11-22 13:20:34
375
如何利用 ::after 伪元素实现按钮缩放动画与精确定位 本文旨在解决使用CSS::after伪元素为按钮添加缩放动画时遇到的定位问题。我们将深入探讨position:absolute属性与top、bottom、left等定位属性的协同作用，解释为何::after元素可能未按预期覆盖按钮，并提供一套完整的解决方案，确保伪元素能精确地覆盖其父元素，从而实现流畅且视觉吸引力的交互效果。
2025-11-22 13:20:02
230
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部