JavaScript中如何实现阻止超链接跳转？
发布时间：2022-02-22 13:12:23 所属栏目：语言 来源：互联网
导读：今天给大家分享的是用JavaScrip实现阻止超链接跳转的内容，本文介绍了通过多种写法来实现这一功能的实例，感兴趣的朋友可以了解看看，接下来跟随小编一起学习一下吧。 通过JavaScript，我们可以阻止超链接的跳转。 方法如下： （1）操作超链接的 href 属性
|
今天给大家分享的是用JavaScrip实现阻止超链接跳转的内容，本文介绍了通过多种写法来实现这一功能的实例，感兴趣的朋友可以了解看看，接下来跟随小编一起学习一下吧。 通过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> 此时，点击超链接，也不会进行跳转。 以上就是关于js实现阻止超链接跳转的方法介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习JS有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。 （编辑：张家口站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
