html a标签禁止跳转,a 标签禁用点击事件跳转

首先，大家要知道： a标签是没有disable 属性的，如果想用disable 禁止a标签的点击事件，也是可以实现的

1. a标签要用 disable 属性，必须和 pointer-events属性一起使用

例子如下：

HTML 部分代码：

JS 代码：

$(".praise").attr("disabled",true);

$(".praise").css("pointer-events","none");

js 缩写一行搞定：$(".praise").attr("disabled",true).css("pointer-events","none");

总结：这样就可以将a标签设成不可点击状态了。不过虽然是不可点击状态，当a标签任然是蓝色，所以要人为的给他添加上灰色字体。

2. pointer-events 属性详解

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专用，这里不介绍了

3.浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持

html a标签禁止跳转,a 标签禁用点击事件跳转相关推荐

android listview里item添加一个按钮点击事件,ListView Item点击事件跳转详情界面
有好久都没有碰安卓了,考试加五一双组合也真是让人蛋疼.好在都平安的度过了,所以又有时间gun回来弄弄我的小博客(虽然没多少人看= =).看了之前做的几个小demo,模式都差不多,但是每次写的时候都要在 ...
html页面如何跳转到asp,asp点击按钮跳转页面 ASP中按钮的点击触发网页跳转
ASP中按钮的点击触发网页跳转 asp中要实现点击一个按钮转到另一个网页有几种方法就是按下一个BUTTON,转到另一个网页,一共有哪些方式实现? 我只知道ona标签,背景图按钮,直接点击跳转链接hre ...
uniapp 在onLaunch中，使用redirectTo或reLaunch跳转页面后，点击事件失效解决方法
好久没有记录了(今天更新下),使用uniapp编译成小程序时,在onLaunch中重定向会导致点击事件失效. 但是,如果,你重定向的页面中有使用navigator组件跳转后再返回,点击事件又有效了,在 ...
disabled运用；div，li元素禁用点击事件；防止a标签打开url；禁用click事件，删除onclick
法一:添加disabled,一般适用于input,button,textarea等表单元素. $(docment).attr("disabled", "true" ...
路由跳转新标签页打开
路由跳转新标签页打开示例图: 点击页面跳转方法: toApply() {let routerData = this.$router.resolve({path: "/apply" ...
关于a标签的点击事件触发无效的问题
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提项目为:xxxx管理系统.在该系统中,可以通过点击左侧的菜单(导航栏)来实现右边内容的切换.而且内容区的页面都是嵌套 ...
点击图片跳转android,android 跳转相册选择图片并返回展示
1.点击事件跳转 private void selectImage() { Intent intent = new Intent(); intent.setType("image/*&quo ...
ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题时候发现了不少问题,现在在一 ...
html frame跳转实例,HTML frame标签怎么用？frame标签的具体使用实例
本篇文章主要为大家讲述的是关于HTML frame标签的用法,还有关于frame标签中的属性介绍.还有关于frame标签的使用实例,下面就让我们一起来看看这篇文章吧首先我们先看看HTML frame ...

html a标签禁止跳转,a 标签禁用点击事件跳转

html a标签禁止跳转,a 标签禁用点击事件跳转相关推荐

最新文章

热门文章