314
4

9 回答 9

696
于 2012-05-05T14:38:27.927 回答
23

你也可以试试这个：

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>
于 2017-07-19T05:28:10.317 回答
18

我建议避免使用内联 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;
        }
    };
}​

JS 小提琴演示。

以上更新以减少空间，但保持清晰/功能：

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?");
    };
}

JS 小提琴演示。

使用有点晚的更新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);
}

JS 小提琴演示。

以上将一个函数绑定到每个单独链接的事件；当您可以将事件处理（使用委托）绑定到祖先元素时，这可能会非常浪费，例如：

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);

JS 小提琴演示。

因为事件处理附加到body元素上，该元素通常包含许多其他可点击的元素，所以我使用了一个临时函数 ( actionToFunction) 来确定如何处理该点击。如果单击的元素是一个链接，因此具有tagNameof a，则单击处理将传递给该reallySure()函数。

参考：

于 2012-05-05T14:39:37.857 回答
15 
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
于 2012-05-05T14:38:59.293 回答
1

加号

您可以做到，无需编写 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>

演示页面

于 2013-12-05T19:29:53.593 回答
0

如果您使用 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);
于 2012-05-05T14:46:40.013 回答
0

只是为了好玩，我将在整个文档上使用单个事件，而不是向所有锚标记添加事件：

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

如果你有很多锚标签，这种方法会更有效。当然，当您将此事件添加到具有所有锚标记的容器中时，它会变得更加高效。

于 2012-05-05T15:49:05.910 回答
0

大多数浏览器不显示传递给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>

尝试更改示例中的输入值以预览其工作原理。

于 2019-11-15T13:35:24.337 回答
-1

使用 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>";

我在第一个代码中对其进行了修改，然后我按照我需要的方式运行。我希望我可以帮助需要我的情况的人。

于 2017-01-03T06:17:46.437 回答