使用 JavaScript 使 DIV 可點選

Nithin Krishnan 2023年1月30日 2021年10月2日

JavaScript

使用 onclick 事件處理程式使 Div 可點選
向 Div 新增條件點選
在可點選的 Div 中擁有良好的功能
使用可點選的 Div 實現錨元素功能

HTML 中的 <a> 標籤（或錨元素）通常用於導航控制元件。它是一個可點選的標籤，無需任何幕後工作的 javascript 程式碼即可執行。它不是塊元素。我們可以像錨標籤一樣使用 <div> 標籤來路由到路徑嗎？答案肯定是肯定的，但你需要為它編寫 javascript 程式碼。我們可以在 div 元素上使用 click handler 使其可點選。

使用 `onclick` 事件處理程式使 Div 可點選

錨元素是一個顯示的內聯元素。在設計圖形使用者介面時，此功能可能並不總是對我們有利。div 在設計 GUI 時易於使用，因為它們是獨立的塊元素。div 是一個內容分割元素，預設情況下不可點選。我們可能必須使用 onclick 事件處理程式來處理使用者單擊元素時元素髮出的事件。onclick 事件處理程式接受函式或函式前面的 JavaScript 表示式。當使用者點選 div 時，javascript 會在執行時執行相關的函式或表示式。有幾種方法可以將 onclick 事件處理程式新增到 div 元素。

結合使用 HTML 和 JavaScript 程式碼使 Div 可點選

javascript 和各種 javascript 框架中最廣泛使用的方法是將函式呼叫連結到 HTML 程式碼中的 onclick 事件處理程式。然後我們在 javascript 程式碼中編寫與之關聯的函式定義。一旦使用者單擊 div，onclick 事件處理程式將執行作為引數傳遞給 div 元素的 onclick 的函式。參考以下程式碼。

<div id="title-div" onclick="sayHello()"></div>

function sayHello() {
  console.log("Hello there !!");
}

一旦使用者點選 title-div，關聯函式 sayHello() 就會被執行。我們將有你好！登入 Web 控制檯。與純 javascript 方法相比，這種方法被廣泛使用並且易於除錯。HTML 顯式地顯示了繫結。

使用純 JavaScript 使 `div` 可點選

另一種方法是純粹基於 javascript。我們首先使用 document.getElementById(), document.getElementsByClassName(), document.querySelectorAll() 等任何方法找到預期的 HTML 元素。最常用的查詢 HTML 元素的方法是 document.getElementById()，因為它根據我們在 HTML 中分配給它的 id 唯一標識 HTML 元素。一旦我們找到元素 div 元素，我們附加 onclick 事件處理程式並連結要在 div 的 click 上執行的函式。以下程式碼闡述了該方法。

<div id="title-div">Click here</div>

window.onload = function () {
    var el = document.getElementById("title-div");
    el.onclick = sayHello;
}

function sayHello() {
    console.log("Hello");
}

在上面的程式碼中，我們純粹在 JavaScript 中繫結了 onclick 事件處理程式。HTML 中沒有任何 onclick 對映的痕跡。HTML 使用 div 元素和關聯的 id 保持簡單。另外，請注意我們將 sayHello 函式物件分配給 onclick 事件處理程式。如果我們連結 sayHello()（帶括號）而不是 sayHello，它將導致 JavaScript 在 window 載入本身上執行該函式。當使用者點選 div 元素時，什麼也不會發生。

向 Div 新增條件點選

我們可以有條件地觸發點選事件。使用 HTML 和 JavaScript 方法，我們可以新增帶有 && 或 || 的表示式根據要求籤字。JavaScript 根據布林表示式的計算方式執行 click 事件。如果計算結果為真，JavaScript 將執行關聯的函式。

<div onclick="isEvenClick() && sayHello()">Click Here !!!</div>

function sayHello() {
    console.log("Hello");
}

function isEvenClick() {
    clickCounter++;
    return (clickCounter % 2 === 0)
}

上面的程式碼只會在偶數次點選時記錄 Hello。我們還可以使用表示式編寫相同的程式碼，而不是像下面的程式碼中詳細說明的那樣編寫 isEvenClick() 函式。

<div onclick="(++clickCounter % 2 === 0) && sayHello()" id="title-div">Click here</div>

該表示式在執行時計算為 clickCounter 的值。如果 clickCounter 是偶數，則表示式 (++clickCounter % 2 === 0) 的計算結果為 true，然後執行 sayHello() 函式。

在可點選的 Div 中擁有良好的功能

一旦我們將 click 偵聽器新增到 div，它仍然是一個 div。使用者將無法理解該 HTML 元素是否具有與之關聯的任何使用者互動。為此，我們可以使用 CSS 樣式新增功能。一種這樣的事情是使游標成為手形圖示。我們可以通過使用 cursor: pointer 來實現。向終端使用者提示此 HTML 元素是可操作的，這是一個很好的 UI/UX 實踐。我們可以通過以下方式進行。

<div onclick="sayHello()" style="cursor: pointer;">Click Here !!!</div>

我們可以通過在執行時向元素新增樣式來使用純 JavaScript 實現相同的效果。我們首先使用 document.getElementById() 選擇元素，然後使用 el.style.cursor 新增游標樣式併為其分配字串值 pointer。下面的程式碼解釋了它。

<div onclick="sayHello()">Click Here !!!</div>

window.onload = function () {
    var el = document.getElementById("title-div");
    el.style.cursor = "pointer";
    el.onclick = sayHello;
}

function sayHello() {
    console.log("Hello");
}

使用可點選的 Div 實現錨元素功能

我們可以使用 div 元素來模擬 anchor 元素。<a> 標籤有一個名為 href 的屬性，用於建立超連結。我們可以使用 div 的 onclick 模仿相同的行為。我們連結了一個函式來捕獲 HTML 程式碼中的 click 事件。在 javascript 程式碼中，我們使用 window.location.href 屬性將 URL 連結到 div。觀察以下程式碼中的功能。

<div onclick="navToGoogle()" style="cursor: pointer;">Take me to Google</div>

function navToGoogle() {
    window.location.href = "https://www.google.com";
}

使用 onclick 事件處理程式使 Div 可點選