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超链接跳转的资料请关注开心学习网其它相关文章!
您可能感兴趣
- nodejs登录案例(利用Node.js创建一个密码生成器的全步骤)
- jsonkeyvalue怎么取(替换json对象中的key最佳方案)
- ASP.NET中使用CodeDomProvider调用js文件中的js方法
- python json转换字符串(python3 json数据格式的转换dumps/loads的使用、dict to str/str to dict、json字符串/字典)
- 使用Console命令调试JS
- js日期格式化
- js中Document
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- MVC中JS获取后台的数据
- vuejs全家桶入门教程交流(Vue全家桶入门基础教程)
- SQL Server中如何将数据导出为XML或Json文件
- js三级联动说明(基于JavaScript实现省市联动效果)
- js弹出新窗口被拦截的解决方法
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- js 全局变量与局部变量
- js函数对象
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
- 越南旅游攻略(越南旅游攻略自由行)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
- 给儿童吃什么最好(给儿童吃什么最好消化)
热门推荐
- 怎么python爬取网页图片(详解Python静态网页爬取获取高清壁纸)
- css3 图片边框(css3图片边框border-image的用法)
- pandas字符串和数字(使用pandas把某一列的字符值转换为数字的实例)
- 运行docker时提示端口已被占用(docker 突然不能被外网访问的解决方案)
- dede模板栏目调用(织梦DEDECMS5.7栏目列表页分页URL优化列表页重复的解决方案)
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- Sql Server常用系统存储过程
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- idea激活服务器(搭建本地的idea激活服务器的详细教程)