使用div自定义按钮后，关于该按钮的禁用和启用点击事件

最新推荐文章于 2023-08-22 17:19:49 发布
最新推荐文章于 2023-08-22 17:19:49 发布
阅读量6.3k 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36076584/article/details/79620505
版权

过程：

1.为该div添加了按钮禁用事件disabled 理所当然的没有任何作用。

2.百度得 jq的unbind()事件能清除交互样式 ,测试得确实可以实现。代码$(“div).unbind(“click);

解释：http://www.w3school.com.cn/jquery/event_unbind.asp

然而在页面开始是就禁用点击事件却怎么也无法实现，放弃该方法。

3.再次百度可得 css3中的 pointer-events:none属性可以移除鼠标事件，测试后可以实现。（可能会有浏览器兼容问题）。

解释：http://www.css88.com/book/css/properties/user-interface/pointer-events.htm

weixin_36076584
关注
专栏目录
【在表格下方创建“添加”按钮，完成添加用户信息，点击后自动添加等功能】
weixin_45736311的博客
11-19 1918
视频教程 在Tab表格下方建立一个添加按钮，实现在页面上添加用户信息的功能 1.在elementUI中找到Click,当前使用的是第一种效果，复制 2.在表单下面：创建按钮、复制代码、 3.修改 绑定show，让它默认为打开状态true 给按钮绑定一个点击事件，点击时实现该效果的展示/关闭 修改该弹框的样式（一般不给定背景色，所以只需要把它默认给定的背景色，字体颜色去除即可，宽度：100%，高度：600px，表单一般需要左对齐，所以居中也去除） 在elementUI中找到合适的表单，选择性复制到代
asp.net后台控制div style
weixin_30411997的博客
01-10 280
后台控制div样式显示或者隐藏： protected global::System.Web.UI.HtmlControls.HtmlGenericControl confirmation_new;//定义 ID this.confirmation_update.Style.Add("display", "block");// 直接用 做个备份 免的以后再用 转载于:https://w...
按钮点击事件的禁用和启动
qq_33007465的博客
03-08 5630
一、html按钮标签代码。 <div class="btnBox"> <a href="#" style="background-color: #7097f9" id="btnB" onclick="change()">立即兑换</a> </div> 二、按钮停用的点击事件（一下均可）。 1.$("#btnBox").addClass("disable"); 2.$("#btnB").attr("disabled", true).cs
disable 禁用元素后无法触发点击事件
最新发布
zhangzuruiqqq的博客
08-22 1987
原本是不需要加事件穿透即可触发 但是最近谷歌更新触发不了 加一个事件穿透就好了。在被禁用元素上套一层div div上绑定事件。业务需求点击被禁用的输入框触发事件。
关于div、input、select标签的禁用
weixin_45102035的博客
07-06 3347
关于div、input、select标签的禁用
禁用div元素 —— css静止点击事件
qq_30351747的博客
05-17 3452
描述 一个div盒子，里面特别多内容，现在要禁用div里的所有内容，一般人的想法就是，加个遮罩盒子不就好了吗，开始我也是这样想的，后来发现一个更简单的方法，那就是给这个div加禁止点击事件样式。加上以后，这个盒子里的所有内容都不可以点了，通过这个div样式来控制div是否禁止。 代码 // 通过标的allKfLine来控制样式，通过三元控制样式是否显示 <el-button-group class="allBtn"> <el-button size="mini" @click
如何如何禁用div不能点击？div disabled不能点击 不能click div禁用无效
热门推荐
两天打鱼三天晒网
10-09 1万+
div经常会被用来做按钮，但是有时候我们需要禁用按钮，让按钮不可点击，一般我们会想到用disabled属性： $(".btn").attr("disabled", true); //设置禁用 //经过测试根本没用！div设置了这个属性与click事件无关，照样能点击 网上搜索一大把都是这样写的，然而根本没用！！设置为disabled了照样可以点击。那些转帖的人根本不动脑子。 至于为什么没用具体的原因我也不清楚，猜测大概对于div而言，disabled只是让它内部的元素不可以变动吧，而对事件毫无影响
cursor属性 鼠标指针放在元素范围内时的光标形状
Gamin
11-06 835
/*默认 浏览器设置的光标*/ cursor: auto; cursor属性 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-re..
jQuery EasyUI API 中文文档 – MenuButton菜单按钮使用介绍
12-07
例如，你可以添加事件监听器来处理菜单项的点击事件，或者自定义菜单项的图标和行为。总的来说，jQuery EasyUI 的 MenuButton 提供了一种高效、便捷的方式来构建带有下拉菜单的按钮，极大地简化了前端开发工作。
鼠标点击变色，弹出div,禁用页面
06-21
鼠标点击变色，弹出div,禁用页面鼠标点击变色，弹出div,禁用页面
Vue实现开关按钮拖拽效果
10-14
这个例子展示了如何利用Vue的自定义指令功能实现一个简单的拖拽功能，同时通过数据绑定来控制拖拽的启用和禁用。在实际项目中，这种技术可以用于创建更复杂和动态的交互界面，比如拖放排序、窗口布局调整等。理解并...
js实现iPhone界面风格的单选框和复选框按钮实例
10-23
例如，当启用按钮被点击时，禁用按钮会失去 `selected` 类，同时复选框被选中： ```javascript var parent = $(this).parents('.switch'); $('.cb-disable', parent).removeClass('selected'); $(this).addClass('...
关于asp.net 自定义分页控件
10-27
文章最后提到了控件的下载，这是指开发者可以将自己创建的自定义分页控件打包后提供给他人使用，方便其他开发者在自己的项目中集成和使用。 总结来说，自定义分页控件可以为开发者提供更加灵活和强大的分页功能，...
DIV标签禁用点击事件
possibleGeo的博客
04-02 6368
首先创建一个在css里封装一个不可点击的属性： 例如： .noclick{ pointer-events: none; } 之后只需要在JQuery中对想要不可点击的div标签进行设置即可。 不可点击：$("#DIV标签ID").addClass("noclick"); 可以点击：$("#DIV标签ID").addClass("noclick"); ...
css实现禁止点击的方法
聆听
09-01 8228
css实现禁止点击的方法
html+按钮设置成无效,css怎么设置按钮不可点击？
weixin_30646537的博客
06-03 2782
css可以通过设置按钮点击事件失效实现按钮不可点击。css可以使用pointer-events属性实现点击事件失效。下面我们来看一下css设置按钮不可点击的方法。pointer-events属性除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。实现按钮上的点击事件失效。css设置按钮不可点击示例：a{pointer-events: none...
css 实现div不可点击样式cursor: not-allowed
Taurus_666
06-19 8227
1、对于css 实现div不可点击状态，红圈圈形状不可点击样式 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190619104400608.jpg) cursor: not-allowed; 2、不可点击状态，但是显示箭头样式 cursor: not-allowed; pointer-events: none; ...
本地调用.json文件
weixin_36076584的博客
03-20 9354
1.本地调用.json文件必须在http服务器环境下（wamp.phpstyle,IIS及大部分的开发软件、不包括sublime等轻量级开发软件）。2.json文件书写方法：{“first”:[{“id”:”01″,“name”:”小吕”,“what”:”番茄炒蛋”},{“id”:”02″,“name”:”小欧”,“what”:”红烧茄子”}],“mytime”:[{“thesecond”:”60...
网页编程使用jQuery： 1.两个上下输入框 ，一个验证按钮 1.输入框获得焦点时改变输入框背景色（颜色自定义），失去焦点后恢复原颜色。 2.密码由数字和大小写字母中至少二种组成，长度为6至10位，密码输入后以“*”号显示， 输入完成后输入框失去焦点时，用正则表达式进行判断密码形式是否满足要求，输入有误时在输入框后面显示输入密码类型或长度错误。 3.从二个文本框中输入密码一致时，用文本警告框提示验证通过，否则提示不通过； 4.验证三次密码不一致时，验证按钮禁用3分钟，3分钟之后解除禁止。
06-07
好的，这是一个关于网页编程使用 jQuery 的问题，需要实现以下功能： 1. 两个上下输入框，一个验证按钮。 2. 输入框获得焦点时改变输入框背景色，失去焦点后恢复原颜色。 3. 密码由数字和大小写字母中至少二种组成，长度为6至10位，密码输入后以“*”号显示，输入完成后输入框失去焦点时，用正则表达式进行判断密码形式是否满足要求，输入有误时在输入框后面显示输入密码类型或长度错误。 4. 从二个文本框中输入密码一致时，用文本警告框提示验证通过，否则提示不通过。 5. 验证三次密码不一致时，验证按钮禁用3分钟，3分钟之后解除禁止。 下面是一个简单的实现步骤： 1. HTML结构： ```html <div class="form-group"> <label for="password1">密码</label> <input type="password" class="form-control" id="password1" placeholder="请输入密码"> </div> <div class="form-group"> <label for="password2">确认密码</label> <input type="password" class="form-control" id="password2" placeholder="请再次输入密码"> </div> <button type="button" class="btn btn-primary" id="verify-btn">验证</button> ``` 2. jQuery代码： ```javascript $(document).ready(function() { var password1 = $('#password1'); var password2 = $('#password2'); var verifyBtn = $('#verify-btn'); var count = 0; // 输入框获得焦点时改变输入框背景色，失去焦点后恢复原颜色。 password1.focus(function() { $(this).css('background-color', '#F5F5F5'); }).blur(function() { $(this).css('background-color', '#FFF'); }); password2.focus(function() { $(this).css('background-color', '#F5F5F5'); }).blur(function() { $(this).css('background-color', '#FFF'); }); // 密码输入完成后输入框失去焦点时，用正则表达式进行判断密码形式是否满足要求 password1.on('input', function() { var password = $(this).val(); if (password.length < 6 || password.length > 10) { $(this).next().text('密码长度应为6至10位'); return; } if (!/[0-9]/.test(password) || !/[a-zA-Z]/.test(password)) { $(this).next().text('密码应包含数字和大小写字母中至少两种'); return; } $(this).next().text(''); }); // 确认密码输入完成后输入框失去焦点时，判断两次密码是否一致 password2.on('input', function() { var password1Val = password1.val(); var password2Val = $(this).val(); if (password1Val !== password2Val) { $(this).next().text('两次输入的密码不一致'); return; } $(this).next().text(''); }); // 验证按钮点击事件 verifyBtn.click(function() { var password1Val = password1.val(); var password2Val = password2.val(); // 判断两次密码是否一致 if (password1Val !== password2Val) { alert('两次输入的密码不一致'); count++; // 验证三次密码不一致时，验证按钮禁用3分钟 if (count >= 3) { verifyBtn.attr('disabled', true); setTimeout(function() { verifyBtn.attr('disabled', false); count = 0; }, 3 * 60 * 1000); } return; } alert('验证通过'); }); }); ``` 3. CSS样式： ```css .form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); } ``` 以上是一个简单的实现，具体的实现方式可以根据需要进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值