HTML 的 a标签禁止点击

HTML 的 a标签禁止点击

前言

在HTML中,要实现超链接需要使用标签 <a></a> 这个标签有多个属性,如href属性、target属性等。

在程序开发中,有时候我们需要实现a标签不可点击功能,但是a标签的属性中并没有disabled 这时,要实现a标签不可点击,需要用到css的知识。

正文

主要方法: 给a标签设置css样式属性 pointer-events

<a href="" style="pointer-events:none;">//none属性值代表元素不对指针事件作出反应

这样设置之后,a标签就为不可点击状态了。

附上css官网的 pointer-events 属性详解 :

pointer-events: auto|none;
(设置元素是否对指针事件做出反应,none代表不做反应,auto默认值代表做出反应)

浏览器支持:
在这里插入图片描述

参考:
https://blog.csdn.net/weixin_41883384/article/details/80163823
https://www.w3school.com.cn/cssref/pr_pointer-events.asp

要实现点击 a 标签提交其值的功能,可以使用 JavaScript 来实现。具体实现步骤如下: 1. 给 a 标签添加一个点击事件监听器; 2. 在点击事件处理函数中,获取到 a 标签的 href 属性值; 3. 构造一个表单,将 a 标签的 href 属性值作为表单的 action 属性值; 4. 将表单的 method 属性值设置为 "get"; 5. 创建一个隐藏的 input 元素,并将其 name 属性值设置为 "value",将 a 标签的值作为其 value 属性值; 6. 将 input 元素添加到表单中; 7. 将表单添加到页面中,并提交表单。 下面是一个示例代码: ```html <a href="http://example.com" class="submit-link" data-value="example">Submit</a> <script> var submitLinks = document.querySelectorAll('.submit-link'); submitLinks.forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); var form = document.createElement('form'); form.setAttribute('action', link.href); form.setAttribute('method', 'get'); var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', 'value'); input.setAttribute('value', link.dataset.value); form.appendChild(input); document.body.appendChild(form); form.submit(); }); }); </script> ``` 在上面的代码中,我们给 a 标签添加了一个 data-value 属性来存储其值。在点击事件处理函数中,我们首先禁止了默认行为,然后构造了一个表单,并将 a 标签的 href 属性值作为表单的 action 属性值。接着,我们创建了一个隐藏的 input 元素,并将其 name 属性值设置为 "value",将 a 标签的值作为其 value 属性值。最后,我们将 input 元素添加到表单中,并将表单添加到页面中,并提交表单。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值