首页 > 其他分享 >禁用a标签点击事件

禁用a标签点击事件

时间:2023-02-14 16:15:33浏览次数:39  
标签:none SVG 禁用 点击 标签 pointer events 属性

 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"); 

 

标签:none,SVG,禁用,点击,标签,pointer,events,属性
From: https://www.cnblogs.com/ZhuMeng-Chao/p/17119906.html

相关文章