使用 JavaScript 使 DIV 可點選
![使用 JavaScript 使 DIV 可點選](/img/JavaScript/feature-image---make-a-div-clickable.webp)
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';
}