实战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

主站蜘蛛池模板: 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | 一航网络-软件测评官网 | TYPE-C厂家|TYPE-C接口|TYPE-C防水母座|TYPE-C贴片-深圳步步精 | 上海赞永| 电车线(用于供电给电车的输电线路)-百科 | 深圳宣传片制作_产品视频制作_深圳3D动画制作公司_深圳短视频拍摄-深圳市西典映画传媒有限公司 | 头条搜索极速版下载安装免费新版,头条搜索极速版邀请码怎么填写? - 欧远全 | 山东限矩型液力偶合器_液力耦合器易熔塞厂家-淄博市汇川源机械厂 | 上海心叶港澳台联考一对一培训_上海心叶港澳台联考,港澳台联考一对一升学指导 | 连续油炸机,全自动油炸机,花生米油炸机-烟台茂源食品机械制造有限公司 | 河南橡胶接头厂家,河南波纹补偿器厂家,河南可曲挠橡胶软连接,河南套筒补偿器厂家-河南正大阀门 | 安徽免检低氮锅炉_合肥燃油锅炉_安徽蒸汽发生器_合肥燃气锅炉-合肥扬诺锅炉有限公司 | 哈尔滨治「失眠/抑郁/焦虑症/精神心理」专科医院排行榜-京科脑康免费咨询 一对一诊疗 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 干法制粒机_智能干法制粒机_张家港市开创机械制造有限公司 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 棕刚玉_白刚玉_铝酸钙-锐石新材料 | 右手官网|右手工业设计|外观设计公司|工业设计公司|产品创新设计|医疗产品结构设计|EMC产品结构设计 | 沉降天平_沉降粒度仪_液体比重仪-上海方瑞仪器有限公司 | 深圳激光打标机_激光打标机_激光焊接机_激光切割机_同体激光打标机-深圳市创想激光科技有限公司 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 好看的韩国漫画_韩漫在线免费阅读-汗汗漫画 | 荣事达手推洗地机_洗地机厂家_驾驶式扫地机_工业清洁设备 | 活性炭-蜂窝-椰壳-柱状-粉状活性炭-河南唐达净水材料有限公司 | 皮带机-带式输送机价格-固定式胶带机生产厂家-河南坤威机械 | 空调风机,低噪声离心式通风机,不锈钢防爆风机,前倾皮带传动风机,后倾空调风机-山东捷风风机有限公司 | 船用锚链|专业锚链生产厂家|安徽亚太锚链制造有限公司 | arch电源_SINPRO_开关电源_模块电源_医疗电源-东佑源 | 综合管廊模具_生态,阶梯护坡模具_检查井模具制造-致宏模具厂家 | 石家庄律师_石家庄刑事辩护律师_石家庄取保候审-河北万垚律师事务所 | 南京兰江泵业有限公司-水解酸化池潜水搅拌机-絮凝反应池搅拌机-好氧区潜水推进器 | 温湿度记录纸_圆盘_横河记录纸|霍尼韦尔记录仪-广州汤米斯机电设备有限公司 | 药品冷藏箱厂家_低温冰箱_洁净工作台-济南欧莱博电子商务有限公司官网 | 走心机厂家,数控走心机-台州博城智能科技有限公司 | 西安耀程造价培训机构_工程预算实训_广联达实作实操培训 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 广州中央空调回收,二手中央空调回收,旧空调回收,制冷设备回收,冷气机组回收公司-广州益夫制冷设备回收公司 | 懂研帝_专业SCI论文润色机构_SCI投稿发表服务公司 | 光栅尺_Magnescale探规_磁栅尺_笔式位移传感器_苏州德美达 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 气动|电动调节阀|球阀|蝶阀-自力式调节阀-上海渠工阀门管道工程有限公司 | 专业生物有机肥造粒机,粉状有机肥生产线,槽式翻堆机厂家-郑州华之强重工科技有限公司 |