1. 程式人生 > >jQuery的click事件在當前頁彈出層視窗(不開啟新頁面)

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