最简单的让DIV中的input、a标签等都无法触发点击事件的方法

最新推荐文章于 2022-07-30 19:26:06 发布
最新推荐文章于 2022-07-30 19:26:06 发布
阅读量587 收藏 1
点赞数
文章标签： css jquery js vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/great_1996/article/details/110257085
版权

给这个div添加上属性style="pointer-events: none;"

jquery的方法:
$("div的选择器").css("pointer-events","none");

听胡说
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
input不管用 vue_vue 设置 input 为不可以编辑
weixin_39786141的博客
12-20 701
我用最笨的方法，先实现功能先,用两个input,一个可以编辑，一个不可以编辑，失去焦点后隐藏可以点击的那个，点“编辑”时，显示可以编辑的那个input@input="changeValue"@change="editGroupNameSave(groupInfo.name)" v-show="isEditGroupName" @blur="isEditGroupName = false">e...
解决动态生成input无法触发click事件的问题
06-17 1万+
$('.delServer').click(function() {     alert("ok"); }); 原因： 异步导致绑定事件失败。 解决方法： 使用全局绑定事件 $(document).on("click",".delServer",function(){     alert("ok"); });
JQuery实现点击里层div事件，不触发外面的div的点击事件
u013954206的博客
03-03 3924
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery实现点击里层div事件，不触发外面的div的点击事件</title> </head> <body> <div id="outter" styl...
input事件在ie9以下不兼容问题完美解决
weixin_34253539的博客
12-11 405
上周四好不容易加了几天班把刚接手的一个pc页面做完，周五同事说要兼容ie7~ie9，结果在上面一跑，输入都没法输入。 我的需求是用6个span作为虚拟的密码输入框，实际上是用一个藏在页面里的input来实现输入的。如下图 上面是我要实现的页面，和页面结构dom，就是点击span的的父节点div的时候，要让input获取焦点。左边是input，为了给大家展示就先不藏起来了，对了，千...
解决input输入框在使用类似Vue框架时，手动赋值不触发事件问题
JCM_ZZ的博客
07-30 1347
解决input输入框在使用类似Vue框架时，手动赋值不触发事件问题
基于Jquery+div+css实现弹出登录窗口(代码超简单)
11-23
在本文中，我们将探讨如何利用Jquery、div和CSS实现一个弹出登录窗口。这个功能在许多网站上都很常见，通常用于用户验证或提供访问受保护内容的方式。下面，我们将详细解析实现这一功能的关键代码和设计原理。 首先...
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
在Vue项目中，有时我们需要在可编辑的div元素中实现用户能够插入内容的功能。这个功能在文本编辑器或者富文本编辑场景中非常常见。本文将详细介绍如何在Vue中实现在可编辑div的光标位置插入内容，并提供相关代码示例...
DIV随滚动条滚动而滚动的实现代码【推荐】
11-23
在网页设计中，有时我们需要创建一个元素，如`DIV`，使其随着用户滚动页面时保持在屏幕上的固定位置。这通常用于创建浮动的侧边栏、提示框或表单等。在传统方法中，实现这样的效果可能需要复杂的CSS和JavaScript，但...
html的DOM中Event对象onblur事件用法实例
09-03
`onblur`事件可以应用于大多数与用户交互的HTML元素，包括但不限于`<input>`、`<textarea>`、`<select>`等表单元素，以及`<a>`、`<button>`、`<div>`等非表单元素。它在表单验证、数据处理和用户体验优化等方面有着...
js点击连续添加input输入框并且判断值
06-25
在JavaScript编程中，"js点击连续添加input输入框并且判断值"这个功能是常见的动态表单构建场景。这种技术常用于需要用户输入不确定数量信息的情况，例如购物网站的商品添加、在线问卷调查等。下面我们将详细讲解...
[jQuery]解决动态生成input无法触发click事件的问题
Balmunc的专栏
01-05 6183
<div class='div_delServer'><input type="button" class="delServer" value="删除服务器"></div> $('.delServer').click(function() { alert("ok"); }); 原因： 异步导致绑定事件失败。 解决方法： 1、使用全局绑定事件 $(docu......
点击a标签跳转链接，不触发外层div点击事件
lyj293839的博客
11-09 603
众所周知防止事件冒泡 event.stopPropagation() 废话不多说，简单上代码 加个click方法，这样点击a标签，就不会触发外面div事件
css中input表单focus兄弟触发失效问题
weixin_43665686的博客
07-04 2170
解决input标签focus兄弟触发失效问题
设置div不可点击，input标签不可填
qq_44161201的博客
09-28 906
.notclick { pointer-events: none; } $(".save").addClass("notclick"); $(".save").removeClass("notclick");
鼠标无法点击input输入框的原因分析
热门推荐
weixin_43225142的博客
03-06 1万+
前言:在前端碰到一个小问题,发现在登录界面上的有一个输入验证码的输入框无法被鼠标点击.花了一个下午的时间终于找出原因了,下面对这个小问题进行简单的总结. 首先:定位问题,输入框无法被鼠标点击可以直接定位到两个问题上: 1.输入框无法获取焦点 2.输入框被页面中的其它div层挡住了. 下面写一段代码来复现这个问题,再给出具体的解决方案 &lt;style&gt; .cc{ w...
div 中class 是input 如何让两个input数据同步
最新发布
08-21
### 回答1： 可以通过JavaScript来实现两个input数据同步。首先，为两个input元素都添加一个事件监听器，当其中一个input的值发生变化时，即可通过`value`属性获取其值，并将其赋值给另一个input的`value`属性。以下是一个简单的示例代码： ```html <div> <input class="input1" type="text"> <input class="input2" type="text"> </div> <script> const input1 = document.querySelector('.input1'); const input2 = document.querySelector('.input2'); input1.addEventListener('input', () => { input2.value = input1.value; }); input2.addEventListener('input', () => { input1.value = input2.value; }); </script> ``` 这样，当你在其中一个input中输入内容时，另一个input也会自动显示相同的内容，从而实现了数据同步。 ### 回答2： 在HTML中，我们可以通过JavaScript来实现两个class为input的div中的输入数据同步。 首先，我们需要获取这两个class为input的div元素。可以使用document.getElementsByClassName()方法来获取所有class为input的元素，并将其存储在一个变量中。 然后，我们可以使用addEventListener()方法来为这两个元素添加一个input事件监听器。这样，当用户输入时，会触发该监听器。 在监听器函数中，我们可以获取用户在其中一个input元素中输入的数据，并将其赋值给另一个input元素的value属性。这样就实现了两个input数据的同步。 以下是一个简单的示例代码： ```html <div class="input"> <input id="input1" type="text"> </div> <div class="input"> <input id="input2" type="text"> </div> <script> var inputs = document.getElementsByClassName("input"); inputs[0].addEventListener("input", function () { var input1Value = document.getElementById("input1").value; document.getElementById("input2").value = input1Value; }); inputs[1].addEventListener("input", function () { var input2Value = document.getElementById("input2").value; document.getElementById("input1").value = input2Value; }); </script> ``` 在上述代码中，我们使用了addEventListener()方法为两个input元素添加了input事件监听器。当其中一个元素的值发生变化时，监听器函数会将该值赋值给另一个元素的value属性，从而实现两个input数据的同步。 ### 回答3： 要实现两个class为input的div中的数据同步，可以通过以下步骤： 首先，为每个input元素添加一个唯一的id属性，例如，一个div的id设置为"div1"，另一个div的id设置为"div2"。 然后，在JavaScript中，使用document.getElementById方法获取这两个div元素，并将它们分别保存到变量div1和div2中。 接下来，获取div1中的input元素和div2中的input元素，分别保存到变量input1和input2中。 然后，为input1和input2分别添加一个事件监听器，监听它们的输入变化。 在事件处理程序中，获取input1的值并将其设置为input2的值，以实现数据的同步。同样，也可以获取input2的值并将其设置为input1的值。 最后，要确保在页面加载时，div1和div2中的初始值已经设置，并且两个input元素的初始值可以同步。 以上是一种基本的实现方式，可根据具体需要进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值