jQuery的click事件在當前頁彈出層窗口(不打開新頁面)


當給鏈接添加一個click事件,我們可能不希望Web瀏覽器按照其常規模式退出當前頁面並通過新頁面載入鏈接的目的地,而是在當前頁彈出層窗口(不打開新頁面)。例如,當單擊了一個縮略圖上的鏈接時,頁面會載入一幅較大的圖像。通常,單擊鏈接會退出頁面並在一個空白頁面上顯示圖像本身的較大版本。然而,在這個例子中,停留在同一頁面,較大的圖像在這里載入,而不是按照鏈接打開圖像。

有幾種方法可以阻止鏈接按照其慣例進行工作,可以返回一個false值或使用jQuery的preventDefault()函數。例如,假設有一個鏈接把訪問者帶到一個登錄頁面。為了讓站點給人感覺更具有響應性,當訪問者單擊該鏈接的時候,我們希望使用JavaScript來顯示一個登錄頁面。換句話說,如果訪問者的鏈接支持JavaScript,當他單擊了該鏈接,該頁面上將會出現一個表單;如果瀏覽器關閉了JavaScript,單擊鏈接將會把訪問者帶到一個登錄頁面。

實現這一目標有幾個步驟:

1.選擇登錄鏈接。

2.附加一個click事件。

可以使用jQuery的click()函數觸發鼠標事件來做到這點。click()函數接收另一個函數作為參數。這個函數包含了當用戶單擊鏈接時發生的步驟。在這個例子中,只需要兩個步驟。

3.顯示登錄表單。

當頁面載入的時候,登錄表單應該隱藏不可見,可能是位於鏈接之下的一個絕對定位的<div>標簽。可以使用show()函數或者jQuery的其他顯示效果之一來顯示該表單。

4.停止鏈接。

這是最重要的一步。如果沒有停止鏈接,Web瀏覽器將直接離開當前頁面而載入登錄Web頁面。

下面是如何使用“返回false”的方法來停止鏈接起作用。假設該鏈接的I D為showForm並且隱藏的帶有登錄表單的<div>標簽擁有一個ID為loginForm:

  1. $('#showForm').click(function(){
  2. $('#loginForm').fadeIn('slow');
  3.  return false;
  4. });

第1行完成上述步驟1和步驟2的任務,第2行顯示了隱藏的表單。第3行告訴瀏覽器“停下來,不要打開這個鏈接”。宅男社必須讓return false;語句作為該函數的最后一行,因為一旦JavaScript解釋器遇到了返回語句,它就會退出函數。

也可以使用jQuery的preventDefault()函數,如下所示:

  1. $('#showForm').click(function(evt){
  2. $('#loginForm').fadeIn('slow');
  3. evt.preventDefault();
  4. });

這個腳本的基本細節和前面的一個相同。主要區別在於,分配給click事件的函數現在接收一個參數:evt,它表示事件本身。事件有其自己的一組函數和屬性,preventDefault()函數直接停止了和事件相關的任何默認行為:對於鏈接上的一次單擊,它載入一個新的Web頁面。

轉載請注明出處:http://www.uphtm.com/js/171.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM