禁用a标签点击事件
a标签是没有disable属性的 ,如果想用disable 禁用a标签的点击事件,也可以实现;
1.a标签要用disable属性,必须和pointer-events属性一起使用,
html代码:
<a id="test">测试</a>
js代码:
$("#test").attr("disabled",true).css("pointer-events","none");
2.pointer-events 属性详解
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了 pointer-events为其它值,
比如auto,鼠标还是会监听这个子元素的。
用途:
比如投票,只能投一次,点赞只能给一个人赞
$(this).addClass("yizan").children().addClass("zan_icon"); 当前的a标签为已赞状态
$(".praise a").attr("disabled",true).css("pointer-events","none");//只能赞一次,禁止再次触发点击事件
其它属性值为SVG专用
例子:

//取消点击事件
$("a[name=" + index + "]").attr("disabled", true).css("pointer-events", "none");
禁用a标签点击事件的更多相关文章
- jQuery移除或禁用html元素点击事件常用方法小结
移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabled { pointer-events: none; } 二.jQuery方法 方法 ...
- jQuery触发a标签点击事件-为什么不跳转
今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...
- element ui的 el-dropdown-item标签点击事件
在vue项目中使用element的el-dropdown-item标签时 给标签添加click事件 初始时按照正常写法 <el-dropdown-item @click="click( ...
- 使用jquery给html标签加点击事件
//直接给所有img标签绑定click事件 $("img").click(function(){ alert('你点击了图片'); }) //使用bind方法绑定click事件 $ ...
- js控制a标签点击事件 触发下载
问题背景,动态获取data把url赋值到a标签的url中,让a标签自动下载 首先想到的应该是$('xxx').click(), 查资料明白:js中的$(...).click()事件只能触发绑定的onC ...
- 百度地图 Infowidow 内容(content 下标签) 点击事件
需要监听 infowindow 的打开事件 ,查看InfoWindow API 实现 html 点击效果 代码 var infoWindow = that.createDangerInfoWindo ...
- a标签点击事件
onclick="detail(this,'${vo.id}')" function detail(obj,id){ var lb = $("#lb").val ...
- jquery 执行a 标签 点击事件 跳转href 路径
<a href="./export.pdf" id="pdfdown" download="文件名.pdf">下载</a& ...
- jQuery Mobile Slider 禁用点击事件
阿子原创,转载请注明出处. 在使用jQuery Mobile Slider时,发现在页面上下拖动时,很容易不小心触发Slider的点击事件,从而造成误操作.为此需要禁用Slider的点击事件. 官方A ...
- jquery+javascript触发a标签的点击事件
今天项目经理跟我说window.open()在一些浏览器上会被拦截,当时的解决方案是:用a标签的target="_blank"属性也可以打开窗体页面 于是解决了A问题出现了B问题: ...
随机推荐
- day37-文件上传和下载
文件上传下载 1.基本介绍 在Web应用中,文件上传和下载是非常常见的功能 如果是传输大文件一般用专门的工具或者插件 文件上传和下载需要用到两个包:commons-fileupload.jar和com ...
- 异构混排在vivo互联网的技术实践
作者:vivo 互联网算法团队- Shen Jiyi 本文根据沈技毅老师在"2022 vivo开发者大会"现场演讲内容整理而成. 混排层负责将多个异构队列的结果如广告.游戏.自然量 ...
- ATM购物车项目 三层架构
目录 项目开发流程 项目需求 三层架构 (重点) 实际案例 展示层 核心逻辑层 数据处理层 ATM项目 项目开发流程 # 1.项目需求分析 产品经理(客户) 架构师 开发经理 1.架构师 开发经理提前 ...
- SQLMap入门——获取字段内容
查询完字段名称之后,获取该字段的具体数据信息 python sqlmap.py -u http://localhost/sqli-labs-master/Less-1/?id=1 -D mysql - ...
- 编译安装nmon
nmon 是什么? nmon(Nigel's performance Monitor for Linux)是一种Linux性能监视工具,当前它支持 Power/x86/x86_64/Mainframe ...
- css处理渲染的图片变形问题:object-fit: cover
object-fit: cover完美解决!~
- 从Spring中学到的【2】--容器类
容器类 我们在实际编码中,常常会遇到各种容器类,他们有时叫做POJO,有时又叫做DTO,VO, DO等,这些类只具有容器的作用,具有完全的get,set方法,作为信息载体,作数据传输用. 其实,很多地 ...
- 体验一个前端视图层的mvvm的框架Knockoutjs(双向绑定,模板..)..解放您的双手,不再处理那么多的dom操作..快速实现视图层数据与UI的交互处理
笔者之前对于类似前端展示的,可能都是自己开发js对象,集合外加dom事件进行处理.. 近期看到相关资料,了解了Knockoutjs这个框架,下面来段代码: <script type=" ...
- 你的 GitHub 年度报告「GitHub 热点速览 v.22.52」
辞旧迎新的日子,又是年度报告满天飞的时候.GitHub 也不落其他平台之后,推出了用户 GitHub Contributions 报告.不知道,今年的你是不是比去年搬了更多的砖呢?在本期的 News ...
- [OpenCV实战]38 基于OpenCV的相机标定
文章目录 1 什么是相机标定? 2 图像形成几何学 2.1 设定 2.1.1 世界坐标系 2.1.2 相机坐标系 2.1.3 图像坐标系 2.2 图像形成方法总结 3 基于OpenCV的相机标定原理 ...