关于javascript：如何在单击＆lt; a＆gt;时显示确认对话框


How to display a confirmation dialog when clicking an <a> link?

我希望此链接有一个javascript对话框，询问用户"确定吗？Y/N"。

1
Link

如果用户单击"是"，则应加载链接，如果单击"否"，则不会发生任何情况。

我知道如何在窗体中这样做，使用onclick运行返回true或false的函数。但是，我如何使用链接来实现这一点呢？

相关讨论

内联事件处理程序

最简单的方法是，可以在内联onclick处理程序中使用confirm()函数。

1
Link

高级事件处理

但通常您希望将HTML和JavaScript分开，所以我建议您不要使用内联事件处理程序，而是在链接上放置一个类，并向其添加一个事件侦听器。

1
2
3
4
5
6
7
8
9
10
Link
...
<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);
    }

此示例仅适用于现代浏览器(对于较旧的IES，您可以使用attachEvent()、returnValue，并提供getElementsByClassName()的实现，或者使用类似jquery的库来帮助解决跨浏览器问题)。您可以阅读有关MDN上此高级事件处理方法的更多信息。

JQuery

我希望远离被视为jquery狂热分子，但DOM操作和事件处理是两个对浏览器差异帮助最大的领域。为了好玩，下面是jquery的效果：

1
2
3
4
5
6
7
Link
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
相关讨论

我建议避免使用在线javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
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小提琴演示。

上面的更新是为了减少空间，尽管保持清晰/功能：

1
2
3
4
5
6
7
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，评论如下：

1
2
3
4
5
6
7
8
9
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小提琴演示。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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来确定如何处理该单击。如果单击的元素是链接，因此具有a的tagName，则单击处理将传递给reallySure()函数。

参考文献：

  • addEventListener()。
  • 条件("三元")运算符。
  • confirm()。
  • getElementsByTagName()。
  • onclick。
  • if () {}。
相关讨论

1
Confirm OK, then goto URL (uses onclick())

您也可以尝试以下操作：

1
    Link Text
相关讨论

贾普拉斯

你可以这样做，不需要编写javascript代码

1
2
3
4
5
6
7
8
9
<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8">
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8">
</head>
<body>
...
   Link
...
</body>

演示页

相关讨论

使用php、html和javascript提示

如果有人想在一个文件中使用php、html和javascript，下面的答案对我很有用。我附上了用于引导图标"垃圾"的链接。

1
" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span>

我之所以在中间使用PHP代码是因为我不能从一开始就使用它。

以下代码对我不起作用：

1
echo"<span class='glyphicon glyphicon-trash'></span>";

我在第一个代码中修改了它，然后按照我需要的方式运行。我希望这能帮助我的案件中的某人。

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

1
2
3
4
5
6
7
8
9
10
11
12
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?' );
    }
};

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

如果使用AddEventListener(或AttachEvent)附加事件处理程序，则此方法与上述任一答案稍有不同。

1
2
3
4
5
6
7
8
9
10
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;
  }
}

您可以使用以下任一项附加此处理程序：

1
document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

或者对于旧版本的Internet Explorer：

10

相关讨论