JavaScript 阻止超链接跳转的操作方法(多种写法)(JavaScript 阻止超链接跳转的操作方法多种写法)
类别:编程学习 浏览量:2697
时间:2021-11-08 14:03:30 JavaScript 阻止超链接跳转的操作方法(多种写法)
JavaScript 阻止超链接跳转的操作方法多种写法通过JavaScript,我们可以阻止超链接的跳转。
方法如下:
(1)操作超链接的 href 属性
写法一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="javascript:void(0);" rel="external nofollow" >超链接</a> </body> </html>
写法二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="javascript:;" rel="external nofollow" >超链接</a> </body> </html>
点击链接,链接并不会进行跳转。
(2)阻止链接的默认行为
写法一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" >百度</a> <script> var link = document.querySelector("a"); link.addEventListener('click',function(e){ e.preventDefault(); }) </script> </body> </html>
写法二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" >百度</a> <script> var link = document.querySelector("a"); link.onclick = function (e) { return false; } </script> </body> </html>
此时,点击超链接,也不会进行跳转。
以上就是JavaScript 阻止超链接跳转的操作方法(多种写法)的详细内容,更多关于js超链接跳转的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- nodejs如何识别接口(Node实现搜索框进行模糊查询)
- js中Document
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- extjs xtype的使用
- eval解析json字符串
- python将对象转换成json(python对象与json相互转换的方法)
- js事件冒泡与事件捕获(基于事件冒泡、事件捕获和事件委托详解)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- js隐藏显示tr
- JS匿名函数的用法
- JS中sort()和reverse()
- js获取子表单所有数据(JavaScript实现异步提交表单数据)
- js的replace的用法
- JS函数前面感叹号的作用
- js数字时钟编程(JavaScript实现动态数字时钟)
- 虐待儿童是发泄支配欲的愚蠢行为(虐待儿童是发泄支配欲的愚蠢行为)
- 你或许不知道你隐藏的支配欲望(你或许不知道你隐藏的支配欲望)
- 把宽体丰田86卖了,换成7.5代高尔夫GTI玩起姿态与性能并存的改装(把宽体丰田86卖了)
- 大众推出了第五代高尔夫GT(大众推出了第五代高尔夫GT)
- 换代在即,现在是抄底 7.5代 高尔夫的最佳时机吗(换代在即现在是抄底)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
热门推荐
- 云主机和免备案空间(香港云主机免备案利弊分析)
- mysql3种日志(mysql中的7种日志小结)
- dockerrun执行脚本(docker run和start的区别说明)
- css用clearfix清除浮动
- php网页采集教程交流(PHP实现的抓取小说网站内容功能示例)
- mysql存储过程limit参数(MySQL存储过程in、out和inout参数示例和总结)
- sql查询union怎么用(SQL语句之Union和Union All的用法)
- 为什么网页不显示css效果(网页布局中CSS样式无效的十个重要原因详解)
- C#中TryParse的用法
- python图片识别文字代码(python批量识别图片指定区域文字内容)