实战IT培训机构_黄色激情网站_IT培训班选大学生IT技术培训中心_黄色激情视频网站_中公优就业

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> 
文章“【Web前端基礎知識】阻止a標簽的跳轉”已幫助

更多內容

>>本文地址:http://www.jecan.cn/zhuanye/2021/69432.html

THE END  

聲明:本站稿件版權均屬中公教育優就業所有,未經許可不得擅自轉載。

1 您的年齡

2 您的學歷

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

獲取測試結果
  • 大前端大前端
  • 大數據大數據
  • 互聯網營銷互聯網營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯網嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內設計室內設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網頁設計網頁設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開發VR/AR
  • 網絡安全網絡安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發智能機器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板: 纸箱网 -纸箱机械|设备|包装纸盒|包装印刷行业门户网站 | 旗杆生产厂家_不锈钢锥形旗杆价格_铝合金电动旗杆-上海锥升金属科技有限公司 | 地磅-电子地磅维修-电子吊秤-汽车衡-无人值守系统-公路治超-鹰牌衡器 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 洗砂机械-球磨制砂机-洗沙制砂机械设备_青州冠诚重工机械有限公司 | 可程式恒温恒湿试验箱|恒温恒湿箱|恒温恒湿试验箱|恒温恒湿老化试验箱|高低温试验箱价格报价-广东德瑞检测设备有限公司 | 宁夏活性炭_防护活性炭_催化剂载体炭-宁夏恒辉活性炭有限公司 | 电动球阀_不锈钢电动球阀_电动三通球阀_电动调节球阀_上海湖泉阀门有限公司 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 北京印刷厂_北京印刷_北京印刷公司_北京印刷厂家_北京东爵盛世印刷有限公司 | 【德信自动化】点胶机_全自动点胶机_自动点胶机厂家_塑料热压机_自动螺丝机-深圳市德信自动化设备有限公司 | CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 中图网(原中国图书网):网上书店,尾货特色书店,30万种特价书低至2折! | 亮化工程,亮化设计,城市亮化工程,亮化资质合作,长沙亮化照明,杰奥思【官网】 | 无尘烘箱_洁净烤箱_真空无氧烤箱_半导体烤箱_电子防潮柜-深圳市怡和兴机电 | 无锡网站建设_小程序制作_网站设计公司_无锡网络公司_网站制作 | 西安烟道厂家_排气道厂家_包立管厂家「陕西西安」推荐西安天宇烟道 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 不锈钢电动球阀_气动高压闸阀_旋塞疏水调节阀_全立阀门-来自温州工业阀门巨头企业 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 济南菜鸟驿站广告|青岛快递车车体|社区媒体-抖音|墙体广告-山东揽胜广告传媒有限公司 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 深圳市万色印象美业有限公司| 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | 浙江栓钉_焊钉_剪力钉厂家批发_杭州八建五金制造有限公司 | 铜镍-康铜-锰铜-电阻合金-NC003 - 杭州兴宇合金有限公司 | HYDAC过滤器,HYDAC滤芯,现货ATOS油泵,ATOS比例阀-东莞市广联自动化科技有限公司 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | PO膜_灌浆膜及地膜供应厂家 - 青州市鲁谊塑料厂 | 北京发电车出租-发电机租赁公司-柴油发电机厂家 - 北京明旺盛安机电设备有限公司 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 振动筛,震动筛,圆形振动筛,振动筛价格,振动筛厂家-新乡巨宝机电 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 六维力传感器_三维力传感器_二维力传感器-南京神源生智能科技有限公司 | 上海橡胶接头_弹簧减震器_金属软接头厂家-上海淞江集团 | 电镀电源整流器_高频电解电源_单脉双脉冲电源 - 东阳市旭东电子科技 | 铝箔袋,铝箔袋厂家,东莞铝箔袋,防静电铝箔袋,防静电屏蔽袋,防静电真空袋,真空袋-东莞铭晋让您的产品与众不同 | 纯水电导率测定仪-万用气体检测仪-低钠测定仪-米沃奇科技(北京)有限公司www.milwaukeeinst.cn 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 手术室净化装修-手术室净化工程公司-华锐手术室净化厂家 | 搅拌磨|搅拌球磨机|循环磨|循环球磨机-无锡市少宏粉体科技有限公司 | 泰兴市热钻机械有限公司-热熔钻孔机-数控热熔钻-热熔钻孔攻牙一体机 | 液压扳手-高品质液压扳手供应商 - 液压扳手, 液压扳手供应商, 德国进口液压拉马 |