使用 JavaScript 使 DIV 可点击

Nithin Krishnan 2023年10月12日

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 可点击