首页 > 其他分享 >整理几个禁止a标签点击

整理几个禁止a标签点击

时间:2024-07-06 23:20:38浏览次数:11  
标签:禁止 标签 JavaScript 点击 禁用 方法 CSS

手机整理了六种禁止a标签点击的方法,包括使用 javascript:void(0)、href="#" 并阻止默认行为、按钮元素、CSS 禁用、JavaScript 禁用及综合方法,帮助开发者更灵活地控制链接行为。

第一种方法:

<a href="#" onclick="return false;">点击这里</a>

第二种方法:

<a href="javascript:void(0)">点击这里</a>

第三种方法:⭐推荐使用

<a href="#" onclick="event.preventDefault();">点击这里</a>

第四种方法:使用CSS禁止点击

  CSS代码

<style>
.disabled-link {
  pointer-events: none;
  color: gray; /* 可选:改变颜色以表示禁用状态 */
  cursor: not-allowed; /* 可选:改变鼠标指针样式 */
}
</style>

  使用方法

<a href="#" class="disabled-link">点击这里</a>

第五种方法:使用JavaScript禁止点击

  JavaScript代码

<script>
document.getElementById("myLink").addEventListener("click", function(event){
  event.preventDefault();
});
</script>

  使用方法

<a href="#" id="myLink">点击这里</a>

第六装方法:结合CSS和JavaScript

  CSS代码

<style>
.disabled-link {
  pointer-events: none;
  color: gray; /* 可选:改变颜色以表示禁用状态 */
  cursor: not-allowed; /* 可选:改变鼠标指针样式 */
}
</style>

  使用方法

<a href="#" class="disabled-link" onclick="return false;">点击这里</a>

 

标签:禁止,标签,JavaScript,点击,禁用,方法,CSS
From: https://www.cnblogs.com/shenjingwa/p/18288057

相关文章

  • HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下
    超链接a标签主要有以下功能:跳转到其他页面<ahref="https://www.baidu.com/"target="_blank">百度</a>href:目标页面的url地址或同网站的其他页面地址,如detail.htmltarget:打开目标页面的方式_self:在同一个网页中显示(默认值)_blank:在新的窗口中打开【常用】_......
  • echarts中Label标签与数据项颜色设置为同一种颜色
    echarts5中默认标签颜色不会跟数据项颜色保持一致,而是全都是黑色。想要实现label颜色和它的数据项颜色一致,需要手动继承颜色,设置label{color:'inherit'}即可解决label标签颜色与数据项颜色一致。  https://echarts.apache.org/examples/zh/editor.html?c=pie-simple注意:......
  • VUE0002:pnpm无法加载,解除系统禁止运行脚本
    1,pnpm:无法加载文件C:\Users\xxxxx\AppData\Roaming\npm\pnpm.ps1,因为在此系统上禁止运行脚本。2,解决方案地址:https://blog.csdn.net/jwbabc/article/details/139505236vscode中执行pnpminstall的时候,直接报了上面的错误。解决: 然后输入:set-ExecutionPolicyRemoteSign......
  • vue2和vue3自定义指令实现只读模式,禁止用户编辑
    解决代码表单组件大量disable的麻烦,实现只读。只需要在需要的地方加上v-read-only即可达到只读效果,快捷方便。实现思路父元素下添加一个遮罩层元素遮罩层元素的显示隐藏由参数决定要想简单快捷的实现,最好用的就是写一个遮罩层,通过遮罩来隔绝用户的操作。原始代码如下:<temp......
  • 使用 Tampermonkey 在页面加载完5秒后监听特定页面元素的点击事件并修改 API 返回的数
    示例 //==UserScript==//@nameNewUserscript//@namespacehttp://tampermonkey.net///@version2024-07-04//@descriptiontrytotakeovertheworld!//@authorYou//@matchhttps://a.x.com/*//@iconhttps://www.......
  • MyBatis中的Where标签:提升你的SQL查询效率
    哈喽,大家好,我是木头左!理解MyBatis的Where标签MyBatis是一款优秀的持久层框架,它提供了许多强大的标签来帮助编写更优雅、高效的SQL语句。其中,<where>标签是使用频率极高的一个,它能够自动处理查询条件,使得的SQL语句更加简洁和高效。在这篇文章中,将深入探讨MyBatis的<where>标签,......
  • antV x6鼠标右键事件、鼠标滑过 节点 新增删除事件、节点 鼠标摁下 node节点禁止连入
    graphSvg为当前的画布//鼠标右键事件graphSvg.on('node:contextmenu',({e,node})=>{e.preventDefault();//阻止默认的右键菜单console.log(e,node)})//鼠标滑过节点新增删除事件graphSvg.on('node:mouseenter',({nod......
  • html排版标签
    HTML排版标签标题标签标题使用<h1>至<h6>标签进行定义,都是双标签。<h1>定义最大的标题,<h6>定义最小的标题。属性align,属性值可以是:left、center、right。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname=&qu......
  • 关于iframe标签用法
    iframe是啥?概念:  iframe是HTML的一个标签,用于在网页中嵌入另一个HTML文档。通俗来讲就是你自己的html页面里面可以随便拿一块空间嵌套别的网页。你们看到这个页面两侧的广告(google广告)。下面是我自己在自己页面嵌套的youtube视频~ 代码:效果 iframe的属性:sr......
  • 禁止双指放大HTML
    //禁用双指放大document.documentElement.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()}},{passive:false})//禁用双击放大varlastTouchEnd=0document.documentElement.addEventList......