单击<a>链接时如何显示确认对话框?


268

我希望此链接具有一个JavaScript对话框,询问用户“ 您确定吗?是/否 ”。

<a href="delete.php?id=22">Link</a>

如果用户单击“是”,则链接应该加载,如果“否”,则什么也不会发生。

我知道如何通过onclick运行返回true或的函数在表单中执行此操作false。但是我该如何使用<a>链接呢?


我们如何实现此angularjs1.x
Bhaskara

Answers:


596

内联事件处理程序

以最简单的方式,您可以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的

我想远离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>

真的那么容易吗?我感到尴尬还是什么!我只是假设这仅适用于表单。确认对话框是否适用于每个可单击的元素?
Christoffer

1
@Tophe确认对话框本身与特定元素无关。
卡帕2012年

1
对于这样简单的事情,真的有必要将HTML和JavaScript分开吗?通过保留这样一个简单而简短的函数,您会预见到哪些问题?
西亚兰·加拉格尔

5
@CiaranG它总是以这样的方式开始:),然后添加this和that,等等。如果您设法将关注点分离,那么摆脱大多数这些内联处理程序,您会感觉更干净。它们与HTML无关。至少在我看来,至少在大多数情况下。总是有特殊情况-懒惰不应该是其中之一。
卡帕

@Ulysnep根据您的编辑建议,在内confirm(…)联处理程序中省略分号时出现错误。我无法重现。
user4642212

15

我建议避免使用内联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 Fiddle演示

上面的内容进行了更新,以减少空间,但保持清晰度/功能:

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 Fiddle演示

使用时稍晚一些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 Fiddle演示

以上将功能绑定到每个单独链接的事件;当您可以将事件处理(使用委托)绑定到祖先元素时,这可能非常浪费,例如:

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 Fiddle演示

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

参考文献:


谢谢。简短的在线确认解决方案有效。为什么您建议避免使用内联代码?我通常出于明显的原因而远离内联CSS,但是简短的javascript代码段又是什么原因呢?
Christoffer

出于与不推荐使用内联CSS的完全相同的原因,它很难维护,并且会导致HTML更加混乱,并且如果需求发生变化,则需要大量的工作来更新。
大卫说恢复莫妮卡(Monica)

我同意不使用内联处理程序的观点。但是,无论如何,如果我们将处理程序附加到脚本中,则应使用高级模型(addEventListener)。+1。
卡帕2012年

@bažmegakapa:我...倾向于同意;但我必须承认,我对addEventListener()模型还不满意。
大卫说恢复莫妮卡(Monica)

您可以替换if(check == true)if(check)
匿名

14
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

5

您也可以尝试以下操作:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

@kapa给出的答案非常简单,也
不会太

1

jAplus

您无需编写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>

演示页面


11
感谢您的共享,但是您当然使用的是Javascript,您要添加整个库来处理非常简单的事情。这值得么?我不知道那个图书馆,我会读一下它,如果您也将其用于其他目的,也许值得额外负担……
Marcos Buarque 2014年

1
这个简单的东西有两个库?
maracuja-juice

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

如果您关心旧的IE,请不要忘记window.event
卡帕2012年

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

如果您有许多锚标记,则此方法将更有效。当然,当您将此事件添加到具有所有锚标记的容器时,它变得更加高效。


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>

尝试在示例中更改输入值,以预览其工作方式。


-2

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

并且我按照第一个代码对其进行了修改,然后我按照需要运行。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.