使用 JavaScript 使 DIV 可点击

Nithin Krishnan 2023年10月12日
  1. 使用 onclick 事件处理程序使 Div 可点击
  2. 向 Div 添加条件点击
  3. 在可点击的 Div 中拥有良好的功能
  4. 使用可点击的 Div 实现锚元素功能
使用 JavaScript 使 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 代码中编写与之关联的函数定义。一旦用户单击 divonclick 事件处理程序将执行作为参数传递给 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 事件处理程序并链接要在 divclick 上执行的函数。以下代码阐述了该方法。

<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';
}