400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】阻止a标签的跳转

【Web前端基础知识】阻止a标签的跳转

  • 发布: Web前端培训
  • 来源:
  • 2021-07-26 15:25:18
  • 阅读()
  • 分享
  • 手机端入口

在我们平时写练习的过程当中,经常会用到a标签来进行链接跳转。在很多情况下,我们不需要让A标签跳转到另外一个链接。我们会选择给我们会选择给a标签的href属性内容设置为#,成为一个锚点连接。

即设置为:

  1. <a href="#">这是一个链接</a> 

但这时候我们也存在着一个问题,即如果页面过长有滚动条,且希望通过链接的 onclick事件执行操作,点击时就会跳转到页面的顶部,但很多页面不需要这样的效果,那今天我们就来给大家分享一下,如何阻止a标签的跳转。

第一种方法:

将它的 href属性设为 javascript:void(0); ,而不要是 #,这可以防止不必要的页面跳动;

即设置为:

  1. <a href="javascript: void(0)">这是一个链接</a> 

第二种方法:

将它的 href属性设为 javascript:; ,js内容不写任何内容,即设置为:

  1. <a href="javascript:;">这是一个链接</a>   

【Web前端基础知识】阻止a标签的跳转

第三种方法:

假设链接中同时存在href与onclick,如果想让href属性下的动作不执行,onclick必须得到一个false的返值;所以我们可以使用在进行点击时return false这种方式,即:

  1. <a href = "https://www.baidu.com"    
  2.    onclick = "alert( '阻止成功' ); return false "    
  3. >这是一个链接</a>   

但是这种方式html和js结构不分离,结构不够明确,所以我们可以使用下一种方法。

第四种方法:

  1. <a href="https://www.baidu.com" >这是一个链接</a>   
  2. <script>   
  3. var link = document.getElementsByTagName("a") [0];   
  4. link.onclick = function () {   
  5.     alert ( '默认跳转阻止成功啦!' );   
  6.     return false;   
  7. }   
  8. </script>  

说明:这里我们绑定了一个点击事件,点击超链接以后,会先执行alert( '默认跳转阻止成功啦!' ),再进行默认的跳转动作。但是我们添加 return false;以后,点击事件函数会直接结束,不会再执行默认的跳转。

第五种方法:

但是如果想要给当前标签绑定多个事件时,使用普通 标签.onclick = function() {}方法添加事件时,会进行事件覆盖,所以有时我们会使用绑定事件,即标签.addEventListener( 事件类型,事件处理函数,是否捕获 )方法。在绑定事件中想要阻止默认事件要使用到事件对象event,之后使用event.preventDefault(),对于兼容IE浏览器的话,进行设置ev.returnValue = false;

  1. <a href="https://www.baidu.com">这是一个链接</a>   
  2. <script>   
  3.     var link = document.getElementsByTagName("a") [0];   
  4.     if ( link.addEventListener ) {   
  5.     // 标准浏览器下绑定   
  6.         link.addEventListener( "click", fun,false);   
  7.    } else {   
  8.     // 低版本IE浏览器下绑定   
  9.          link.attachEvent( "onclick", fun );   
  10.     }   
  11.     function fun(ev) {   
  12.     // 对事件对象做一个兼容处理   
  13.         var ev = window.event || ev;   
  14.         // 标准浏览器    ev.preventDefault();   
  15.     // ie浏览器      ev.returnValue = false;   
  16.     // 对于其中一个做判断,若有该方法则使用,没有则说明为低版本IE浏览器   
  17.     ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;   
  18.     }   
  19. </script> 

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道