onclick實現超鏈接_給超鏈接加onclick事件

在動態網頁中,常常需要在單擊超鏈接時處理一些數據,而不是跳轉一個網頁。在這種情況下,通常有以下三種處理方式:

不設置標簽的href屬性,只設置onclick屬性。在這種處理方式下,通常超鏈接文本會和正文的文本以相同的形式出現,即不會有默認的下劃線。當鼠標放在超鏈接上也不會顯示小手的形狀(除非為該超鏈接設置了CSS)。因此,用戶很難知道這是一個可以點擊的超鏈接。

將標簽的href屬性值設置為"#",并設置onclick屬性。在這種處理方式下,用戶可以很明顯地看出哪些文字是超鏈接。在單擊該超鏈接時,也可以執行onclick屬性值中的JavaScript語句,并且不會跳轉網頁。但是,由于href的屬性值為"#",瀏覽器會自動跳轉到當前網頁的頂部。如果當前網頁內容比較多,瀏覽器窗口出現下拉滾動條時,可以很明顯地看到跳轉,而這種跳轉往往不是網頁設計者的????????? 本意。

在沒有為標簽設置onclick屬性時,如果單擊了該超鏈接,瀏覽器會加載href屬性中的URL。如果href屬性值并不是一個URL,而是一個JavaScript語句的話,那么瀏覽器就會執行該語句。因此,可以直接將JavaScript語句寫在標簽的href屬性值中,讓href屬性代替onclick屬性。在這種處理方式下,既可以響應click事件,又可以不讓網頁跳轉。

在標簽的href屬性值中添加JavaScript語句之前,必須要先使用"javascript:"語句來聲明href屬性值中的語句為JavaScript語句。否則,瀏覽器會將href屬性值中的JavaScript語句當成是URL進行加載。請看代碼清單12-11,注意加粗的文字。

代碼清單12-11? 在超鏈接中使用事件

在超鏈接中使用事件

第1個超鏈接

第2個超鏈接

第3個超鏈接

2b2eabefcdad2e42f51c01f8e8a92b25.png

圖12-11? sample11.htm的

運行結果

在本例中創建了3個超鏈接,這3個超鏈接的處理方式如下所示:

第1個超鏈接中,沒有設置href屬性,因此,從圖12-11中看起來好像只是一行文字,并且鼠標放在上面的時候,也不會顯示小手的形狀。因此,很難讓用戶知道這是一個可以點擊的超鏈接。但是如果用戶單擊了該超鏈接,會彈出一個警告框,而且單擊警告框中的【確定】按鈕之后,不會跳轉到任何URL上。

第2個超鏈接中,href屬性值為"#",如果單擊該超鏈接,先會執行onclick屬性值中的JavaScript,彈出一個警告框。在單擊警告框中的【確定】按鈕之后,瀏覽器會自動跳轉到當前網頁的頂部。

第3個超鏈接中,直接將JavaScript語句寫在href屬性值中。在單擊該超鏈接時,可以執行href屬性值中的JavaScript語句,而且不會有任何跳轉。

讀者可以自己運行該文件查看效果。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/259747.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/259747.shtml
英文地址,請注明出處:http://en.pswp.cn/news/259747.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Android 布局以及優化資料匯總

2019獨角獸企業重金招聘Python工程師標準>>> 1.性能優化之布局優化 2.Android 開源庫 V - Layout 轉載于:https://my.oschina.net/zhugenqiang/blog/822942

AS3容易被忽略的一些特性

1.給sprite設置背景色 給sprite設置背景色,spr.opaqueBackground 0xFFCC33, 在尺寸變化的時候自動重繪背景。需要注意的是背景不能接受鼠標事件,接受鼠標事件的話,需要用graphics繪制背景。 2.在ByteArray里writeUTF("中方漢字")&…

每天一個JavaScript實例-canvas繪圖

<!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8" /> <title>每天一個JavaScript實例-canvas繪圖</title> <style>.canvas{width:600px;height:500px;} </s…

mysql字符集排序規則_Mysql 字符集及排序規則

一、字符集字符集&#xff1a;就是用來定義字符在數據庫中的編碼的集合。常見的字符集&#xff1a;utf8、Unicode、GBK、GB2312(支持中文)、ASCCI(不支持中文)二、字符集排序規則作者本人用的是utf8_general_ci后綴ci (case insensitive)意味不區分大小寫(大小寫不敏感)&#x…

驅動06.觸摸屏驅動程序

1.觸摸屏的簡介 觸摸屏是標準的輸入設備&#xff0c;在寫驅動程序時采用的之前講過的輸入子系統那套框架。我們無需關心對設備文件的操作&#xff0c;只需關心對硬件寄存器的操作和上報事件即可。 觸摸屏是附在LCD上的一層薄膜&#xff0c;并不是我們平時認識的觸摸屏&#xff…

編碼文件AndroidStudio初體驗:解決Execution failed for task ':TestAndroid:compileDebug'.

最近研究編碼文件&#xff0c;稍微總結一下&#xff0c;以后繼續補充&#xff1a; Execution failed for task :TestAndroid:compileDebug.有各種各樣原因&#xff0c;具體就請自己進cmd編譯看什么地方出錯 進入項目的gradle文件地點目錄打 gradlew compileDebug --stacktrace來…

我的大二

一不小心就已經大二了&#xff0c;時間真的過的很快&#xff0c;不知不覺和學長大大一起走過了7個多月~我是個很幸運的人&#xff0c;對此我感激所有人&#xff0c;尤其是那些愛我的&#xff0c;以及教會我做人&#xff0c;指引我許多的人們&#xff01; 不得不承認&#xff0c…

2016國產開源軟件Top100(Q1)

2016國產開源軟件Top100(Q1) 隨著互聯網的發展、開放標準的普及和虛擬化技術的應用等諸多IT新領域的創新及拓展&#xff0c;開源技術憑借其開放性、低成本、穩定性、靈活性、安全性和技術創新性等特點迅速走向成熟&#xff0c;逐步發展成為一種主流模式&#xff0c;日益改變著全…

mysql lenenc int_MySQL-NonMySQL同步工具源碼解讀——確定同步位置

經過上一節的鑒權過后&#xff0c;程序已經受主庫認可&#xff0c;并且可以像主庫發起同步請求。在發起請求之前&#xff0c;還有一個可選的步驟&#xff1a;確認同步時間點。同步時間點由兩個屬性進行標識&#xff1a;Binlog文件名、偏移量。工具支持自定義時間點&#xff0c;…

DancingLinks刷題集

HDU 3663 Power Stations 精確覆蓋 題意&#xff1a;每個城市i有xi->yi天可以成為發射站&#xff0c;發射站覆蓋范圍為與該站有一條邊鏈接的城市。 同時&#xff0c;每個每天城市必須且只能被一個發射站覆蓋 天數D<5。 每個城市的發射站關閉后就不再開啟。即只能選擇一段…

【web前端優化】前端無優化,庸人自擾之!

前言 我發現一個人厲害不只是他厲害&#xff0c;他的名字也一定要跟著厲害才行&#xff0c;比如我刀狂劍癡葉小釵了&#xff0c;若是老夫叫做刀狂劍癡葉小草&#xff0c;估計就缺少氣勢了&#xff01;&#xff01;&#xff01; 又如百世經綸一頁書&#xff0c;如果叫做百世經綸…

react源碼解讀 {createClass}

對一個框架源碼的解讀&#xff0c;既有利于更深入地了解框架&#xff0c;使用上更得心應手&#xff0c;又可以學習到其中代碼組織的思路&#xff0c;吸收其精華簡潔的寫法以便于日常工作上使用。下面我就挑選近年大熱門react&#xff08;15.3.1&#xff09;&#xff0c;從中剖析…

mysql分析sql語句性能_sql語句執行性能分析

explain根據上面提到的explain去比較&#xff0c;就可以得出結果了mysql> explain select * from users limit 1000,20;---------------------------------------------------------------------------------| id | select_type | table | type | possible_keys | key | key…

sourceTree添加git密鑰步驟

給多個遠程服務器比如https://github.com/wangjian2014/wjtest/blob/master/wj.txt添加public密鑰 本地服務器添加private密鑰 SSH Client 選擇PuTTY/Plink 選擇Generate&#xff0c;生成public 和private密鑰&#xff0c;將public密鑰數據復制到遠程服務器上面 保存private…

[tomcat] 配置數據源介紹

從tomcat5.5開始,內置了DBCP數據源的實現。tomcat數據源提供兩種配置方式,兩種數據源的訪問范圍不同&#xff0c; 1.全局數據源:顧名思義在tomcat應用下的所有web都可以訪問。 2.局部數據源&#xff1a;適用單個web應用 ★★ 不管以那種方式都得提供特定數據源的jdbc驅動。 此…

background-size

background-size:contain;contain:包含 按比例調整圖片&#xff0c;使得圖片的寬度自適應容器的寬度。 相當于在ps中&#xff0c;約束比例設置原始圖片的寬度值等于容器的寬度值。 如果圖片過大&#xff0c;等比壓縮后容器的高度方向上可能會有空白。 background-size:cover;co…

在mybatis用mysql的代碼塊_關于Mybatis 中使用Mysql存儲過程的方法

1.存儲過程的簡介我們常用的操作數據庫語言SQL語句在執行的時候需要要先編譯&#xff0c;然后執行&#xff0c;而存儲過程(Stored Procedure)是一組為了完成特定功能的SQL語句集&#xff0c;經編譯后存儲在數據庫中&#xff0c;用戶通過指定存儲過程的名字并給定參數(如果該存儲…

MySQL5.6免安裝配置與“系統找不到指定的文件”錯誤

1.下載免安裝版本的mysql-5.6.11-winx64 (本機 win7 64位)2.將文件解壓到任意&#xff0c;不要有中文&#xff08;有中文的情況沒試過&#xff0c;不過最好避免這種情況&#xff09;3.配置mysql 環境變量&#xff0c;在 path后面加上D:\Program Files\mysql-5.6.11-winx64\bin…

安裝配置OSA運維管理平臺

1、下載完整包V1.0.2wget http://www.osapub.com/download/OSA_BETA_V1.0.2.tar.gzV1.0.5wget http://www.osapub.com/download/OSA_BETA_V1.0.5.tar.gz 2、解壓安裝tar xvf OSA_BETA_V1.0.5.tar.gzmv osa /usr/local/ PS&#xff1a;該版本只允許指向/usr/local/osa/目錄&…

as5300g2 nas軟件功能_【浪潮混閃存儲AS5300G5-可同時提供SAN和NAS兩種服務的中端混閃存儲系統】價格_廠家 - 中國供應商...

功能特性極速性能(1)平臺升級&#xff1a;G5采用全新一代硬件平臺&#xff0c;芯片升級、規格升級&#xff0c;性能同比上一代平均提升30%&#xff0c;為提高存儲系統的數據處理效率提供有力支撐。同時結合G5的智能軟件&#xff0c;如智能緩存加速、智能分層、智能QOS等高級功能…