禁用a标签的单击事件响应

最新推荐文章于 2024-07-23 03:56:56 发布
最新推荐文章于 2024-07-23 03:56:56 发布
阅读量2.1k 收藏
点赞数 2
分类专栏： 前端 文章标签： a标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43217942/article/details/100055226
版权

a标签默认有各种状态，例如：光标悬浮在a标签上时（hover）、光标按下时（active）、光标按下后即访问过（visited）、默认状态（link），a标签默认能响应鼠标单击，当光标单击是默认打开href中的链接。因为a标签特殊状态以及可以响应单击事件的原因，在js中使用onclick事件时会无效或造成标签闪烁，如果不取消a表签的单击事件，在单击a标签时、单击a标签后文字都会显示不同的颜色，这颜色是浏览器默认a标签各种状态的颜色。

解决办法：

  1. 将a标签的href属性设置为“javascript：void（0）”，href中的双引号中是可以执行js代码的，执行这句代码使a标签的单击事件无效。

  2. 在js事件方法的内部返回false或href设为“#”返回0。

单击有效

 

单击有效

 

单击无效

 

想了解作者更多，请移步我的个人网站，欢迎交流、留言~
极客技术空间：https://elltor.com/

Elltor
关注
专栏目录
jquery禁用a标签,jquery禁用按钮click点击
wuyou1336的博客
12-15 1万+
jquery禁用a标签方法1 $(document).ready(function () { $("a").each(function () { var textValue = $(this).html(); if (textValue == "XX概况" || textValue == "服务导航") {
vue 点击一个按钮触发两个事件_vue如何触发某个元素的单击事件?
weixin_33034651的博客
01-13 5395
<a class="link">1111</a><a class="link">2222</a><a class="link">333</a><button>点击我触发a的单击事件</button>在jquery中单击某个按钮后可以直接用$('a').trigger("click");来触发a元素的单击...
js a标签点击事件
11-30
当我们在处理a标签上的点击事件时发现即使href=””里面为空，点击事件的效果也不明显，这种情况该如何处理呢?常见的处理方法有以下几种： 1.a href=”[removed]void(0);” rel=”external nofollow” onclick=”method()” 这种方法是比较最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。 2.a href=”[removed];” rel=”external nofo
禁止a标签的点击事件
心若向阳 无谓悲伤
01-17 1715
了解一下：“pointer-events”属性可阻止hover、active、onclick等触发事件 1、可以直接在a标签上加属性 <a style="pointer-events: none;"/> 2、 也可以通过id或者class来控制是否阻止触发事件 $("#aaa").css("pointer-events","none"); //阻止 $("#aaa")...
整理几个禁止a标签点击
最新发布
weixin_41188472的博客
07-23 133
手机整理了六种禁止a标签点击的方法，包括使用 javascript:void(0)、href="#" 并阻止默认行为、按钮元素、CSS 禁用、JavaScript 禁用及综合方法，帮助开发者更灵活地控制链接行为。 手机整理了六种禁止a标签点击的方法，包括使用 javascript...
如何禁用 a 标签的点击事件 disabled属性 和 pointer-events属性值详解
noibug的博客
10-13 3781
首先 ，大家要知道： a标签 是没有disable 属性的 ， 如果想用disable 禁止a标签的点击事件，也是可以实现的；往下看 a标签 要用 disable 属性，必须和 pointer-events属性一起使用 ，例子 如下： HTML 部分代码： 赞 JS 代码： $(".praise").attr("disabled",true); $(".praise").css("pointer-events","none"); js 缩写 一行搞定：$(".praise").at
<a>标签响应onclick事件，防止页面跳动方法总结
日光海岸
02-10 645
最近在点击一个a链接时经常发现，如果有垂直滚动条的话页面经常跳到顶端，于是google了一下，知道了为什么，也找到了几个解决办法。      总结一下，如果在实际应用中确实是要用到&lt;a&gt;标签来响应onclick事件的，那么就建议使用下面三种方法1.&lt;a href="javascript:void(0)" onclick="doSomething()"&gt;test&lt;/a...
demo——关于禁用html中a标签的思考.zip
05-12
首先，禁用`<a>`标签的一个常见原因是为了防止意外点击。在一些交互设计中，可能会有动态元素或者非链接文本看起来像是可以点击的，为了避免用户误解并进行不必要的操作，开发者可能选择移除这些区域的链接功能，...
jquery动态禁用label标签rar
07-03
本资源“jquery动态禁用label标签rar”聚焦于使用jQuery实现动态控制表单元素的功能，特别是针对label标签的禁用效果。通过这个功能，用户可以根据需要使一部分表单元素变得不可交互，提升用户体验。 在表单设计中...
php中button点击事件,PHP相应button中的onclick事件
weixin_28949049的博客
04-11 3729
PHP是服务器端代码 ，html是客户端代码，实现button的onclick事件，就是客户端调用服务器端函数，因此就得向服务器提交请求。有一种简单粗暴的方式，就是button是a标签时，可以直接在href里面写上要执行的php页面(或者通过给button绑定window.location通过JS跳转到到PHP)。这种做法就得为每一个button设计一个PHP代码。而我的做法是：事件+ajax 给...
简单实现Bootstrap标签页
08-31
例如，可以通过JavaScript和Bootstrap的插件API来添加动态切换事件、禁用某些标签、或改变标签的顺序等高级功能。 总结来说，Bootstrap标签页提供了一种直观且灵活的方式，用于在有限的空间内展示多块内容。通过...
＜a＞标签中避免重复点击事件的发生
csdnxyy的博客
06-26 2761
jsp中： <div class="layui-inline"> <a class="layui-btn layui-btn-normal addNews_btn" onclick="batchAddItem()" id="changeGrn">批量选择</a> </div> js中： //批量选择 function batchAd...
a标签的onclick事件，防止重复提交，js中让onclick点击事件只执行一次！
i_yuanpeng的博客
03-18 6706
<a>标签如果中的onclick事件点击几次就触发几次，就会出现多次请求，所以再次点击的时候不让其再触发！ 有2种方式实现，下面详细介绍： 1、不用jQuery的方式：（click事件被执行的时候，把它这个事件本身给清空。） <a href="javascript:;" id="buttonId" onClick="buttonSubmit()" >按钮</a> <script type="text/javascript"> //...
页面的编写（二）
dazn33036的博客
07-25 135
标准流跟浮动 像div，p标签这样的块级元素独占一行，而像span,a这样的行内元素或是input,button,img这样的行内块元素，可以一行显示多个，我们可以把这样的显示方式叫做标准流。 在标准流中，块级元素自己独占一行，可以设置宽高，也可以设置margin,padding,或者说设置的margin和padding的上右下左都起作用。行内元素一行可以显示多个，设置了宽高后，不起...
jquery禁用与恢复a标签和按钮功能
mizuhokaga的博客
04-17 1491
需求:点击一个a标签/按钮需要禁用几秒,计时结束后恢复其相应功能 a标签: 核心代码 禁用: $(’#elementName’).removeAttr(‘href’);/去掉a标签中的href属性 $(’#elementName’).removeAttr(‘onclick’);//去掉a标签中的onclick事件 恢复: $(’#elementName’).attr(‘href’,‘url’); ...
a标签禁用onclick事件，60秒后生效
weixin_34025051的博客
08-09 1100
2019独角兽企业重金招聘Python工程师标准>>> ...
BootStrap学习笔记（二）：关于分页组件中<a>标签disable后还是可以点击的问题
汤圆学Java
05-01 3844
BootStrap分页组件：http://v3.bootcss.com/components/#pagination - 问题描述：分页组件中li的class=’disable’，子标签a还是可以点击； - 解决办法：将a标签改为span即可；或者在首页时去除标签 - 代码如下：<li th:class="disabled"> <span th:href="#" >«</span>
BootStrap3 笔记（一）：关于分页组件中<a>标签disable后还是可以点击的问题
西西燕的博客
06-04 8424
如题，我参考这篇博客http://blog.csdn.net/jalon2015/article/details/71056702 把a改为span之后，分页功能完全失效。正常的点击后也无效。无耐，我就继续看文档菜鸟教程上的按钮介绍http://www.runoob.com/bootstrap/bootstrap-buttons.html。写下本篇如下：**解决方法：** 简单的来说就是不在li
html a标签禁止跳转,a 标签禁用点击事件跳转
weixin_34394265的博客
06-05 2128
首先 ，大家要知道： a标签 是没有disable 属性的 ， 如果想用disable 禁止a标签的点击事件，也是可以实现的1. a标签 要用disable 属性，必须和pointer-events属性一起使用例子 如下：HTML 部分代码：赞JS 代码：$(".praise").attr("disabled",true);$(".praise").css("pointer-events"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值