极客教程如何使用JavaScript / jQuery在点击a链接时显示确认对话框
给定一个<a>元素，任务是在点击<a>链接时显示确认信息，借助于JavaScript和jQuery。
使用JavaScript点击a链接时显示确认对话框
- onclick事件。这个事件发生在用户点击一个元素的时候。
语法:
- 在HTML中。
<element onclick="myScript">
- 在JavaScript中。
object.addEventListener("click", myScript);
- 在JavaScript中，使用addEventListener()方法。
object.onclick = function() {myScript};
- addEventListener() 方法。这个方法在文档中添加一个事件处理程序。
语法:
document.addEventListener(event, function, useCapture)
参数:
- event。这个参数是必需的。它指定了字符串，即事件的名称。
- function。这个参数是必需的。它指定了事件发生时要运行的函数。当事件发生时，一个事件对象被作为第一个参数传给该函数。其类型取决于指定的事件。例如，”点击 “事件属于MouseEvent对象。
- useCapture。这个参数是可选的。它指定了一个布尔值，意味着该事件是否应该在捕获或冒泡阶段执行。
- true: 事件处理程序在捕获阶段执行。
- false:事件处理程序在冒泡阶段被执行。
例子1：这个例子在链接中添加了一个confirm()方法，onclick事件这将验证你是否要继续。
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" onclick="return confirm('Are you sure?')">
Link
</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
el_up.innerHTML =
"Click on the LINK for further confirmation.";
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子2：这个例子为所有的链接添加了一个类确认之后，它将EventListener添加到该类的元素中，在onclick事件中然后，它调用一个方法来单独处理确认对话框
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" class="confirm">Link</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
el_up.innerHTML =
"Click on the LINK for further confirmation.";
var el = document.getElementsByClassName('confirm');
var confirmThis = function (e) {
if (!confirm('Are you sure?')) e.preventDefault();
};
for (var i = 0, l = el.length; i < l; i++) {
el[i].addEventListener('click', confirmThis, false);
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
使用jQuery点击a链接时显示确认对话框
- jQuery on()方法。这个方法为选定的元素和子元素添加一个或多个事件处理程序。
语法:
$(selector).on(event, childSelector, data, function, map)
参数:
- event。这个参数是必需的。它指定了一个或多个事件或命名空间，以附加到选定的元素。在有多个事件值的情况下，这些值用空格分隔。事件必须是一个有效的。
- childSelector。这个参数是可选的。它指定了事件处理程序应该只附加到定义的子元素。
- data。这个参数是可选的。它指定了要传递给函数的额外数据。
- function。这个参数是必需的。它指定了事件发生时要运行的函数。
- map。它指定了一个事件地图（{event:func(), event:func(), …}），有一个或多个事件添加到选定的元素，以及事件发生时要运行的函数。
例子1：这个例子为所有的链接添加了一个类确认之后，它为该类的元素添加了EventListener，在onclick事件中然后它调用确认对话框
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" class="confirm">Link</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
("#GFG_UP").
text("Click on the LINK for further confirmation.");
('.confirm').on('click', function () {
return confirm('Are you sure?');
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
示例2：这个例子为链接添加了一个confirm()方法，并带有onclick事件这将验证你是否要继续。
<!DOCTYPE HTML>
<html>
<head>
<title>
Display a confirmation dialog when
clicking an a tag link
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<a href="#" onclick="return confirm('Are you sure?')">
Link
</a>
<br><br>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$("#GFG_UP").
text("Click on the LINK for further confirmation.");
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。