Answers:
以最简单的方式,您可以confirm()
在内联onclick
处理程序中使用该函数。
<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>
但是通常您希望将HTML和Javascript分开,所以我建议您不要使用内联事件处理程序,而应在链接上放置一个类并为其添加事件侦听器。
<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
var elems = document.getElementsByClassName('confirmation');
var confirmIt = function (e) {
if (!confirm('Are you sure?')) e.preventDefault();
};
for (var i = 0, l = elems.length; i < l; i++) {
elems[i].addEventListener('click', confirmIt, false);
}
</script>
此示例仅在现代浏览器中有效(对于较旧的IE,您可以使用attachEvent()
,returnValue
并为getElementsByClassName()
jQuery之类的库提供实现或使用该库来解决跨浏览器问题)。您可以在MDN上阅读有关此高级事件处理方法的更多信息。
我想远离jQuery迷,但是DOM操作和事件处理是两个在浏览器差异方面最有用的地方。只是为了好玩,这就是jQuery的外观:
<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
$('.confirmation').on('click', function () {
return confirm('Are you sure?');
});
</script>
confirm(…)
联处理程序中省略分号时出现错误。我无法重现。
我建议避免使用内联JavaScript:
var aElems = document.getElementsByTagName('a');
for (var i = 0, len = aElems.length; i < len; i++) {
aElems[i].onclick = function() {
var check = confirm("Are you sure you want to leave?");
if (check == true) {
return true;
}
else {
return false;
}
};
}
上面的内容进行了更新,以减少空间,但保持清晰度/功能:
var aElems = document.getElementsByTagName('a');
for (var i = 0, len = aElems.length; i < len; i++) {
aElems[i].onclick = function() {
return confirm("Are you sure you want to leave?");
};
}
使用时稍晚一些addEventListener()
(如bažmegakapa所建议),在下面的评论中):
function reallySure (event) {
var message = 'Are you sure about that?';
action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');
for (var i = 0, len = aElems.length; i < len; i++) {
aElems[i].addEventListener('click', reallySure);
}
以上将功能绑定到每个单独链接的事件;当您可以将事件处理(使用委托)绑定到祖先元素时,这可能非常浪费,例如:
function reallySure (event) {
var message = 'Are you sure about that?';
action = confirm(message) ? true : event.preventDefault();
}
function actionToFunction (event) {
switch (event.target.tagName.toLowerCase()) {
case 'a' :
reallySure(event);
break;
default:
break;
}
}
document.body.addEventListener('click', actionToFunction);
由于事件处理是附加到body
元素上的,该元素通常包含许多其他可单击的元素,因此我使用了临时函数(actionToFunction
)来确定如何处理该单击。如果clicked元素是链接,因此有一个tagName
of a
,则将单击处理传递给该reallySure()
函数。
参考文献:
addEventListener
)。+1。
addEventListener()
模型还不满意。
if(check == true)
为if(check)
。
您无需编写JavaScript代码即可做到
<head>
<script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
<a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>
如果您使用addEventListener(或attachEvent)附加事件处理程序,则此方法与以上任一答案稍有不同。
function myClickHandler(evt) {
var allowLink = confirm('Continue with link?');
if (!allowLink) {
evt.returnValue = false; //for older Internet Explorer
if (evt.preventDefault) {
evt.preventDefault();
}
return false;
}
}
您可以使用以下任一方法附加此处理程序:
document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);
或对于旧版本的Internet Explorer:
document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
window.event
。
只是为了好玩,我将在整个文档中使用一个事件,而不是将事件添加到所有锚标记:
document.body.onclick = function( e ) {
// Cross-browser handling
var evt = e || window.event,
target = evt.target || evt.srcElement;
// If the element clicked is an anchor
if ( target.nodeName === 'A' ) {
// Add the confirm box
return confirm( 'Are you sure?' );
}
};
如果您有许多锚标记,则此方法将更有效。当然,当您将此事件添加到具有所有锚标记的容器时,它变得更加高效。
大多数浏览器不显示传递给的自定义消息 confirm()
。
使用此方法,如果用户更改了任何内容的值,则可以显示带有自定义消息的弹出窗口 <input>
字段。
您只能将其应用于页面中的某些链接,甚至其他HTML元素。只需将自定义类添加到所有需要确认的链接并应用以下代码即可:
$(document).ready(function() {
let unsaved = false;
// detect changes in all input fields and set the 'unsaved' flag
$(":input").change(() => unsaved = true);
// trigger popup on click
$('.dangerous-link').click(function() {
if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
return; // user didn't confirm
}
// either there are no unsaved changes or the user confirmed
window.location.href = $(this).data('destination');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
Launch nuke!
</a>
尝试在示例中更改输入值,以预览其工作方式。
使用PHP,HTML和JAVASCRIPT进行提示
就算有人要在单个文件中使用php,html和javascript,下面的答案对我也有用。
<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>
我用PHP的原因在中间代码是因为我从一开始就无法使用它。
下面的代码对我不起作用:
echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";
并且我按照第一个代码对其进行了修改,然后我按照需要运行。