Fatal编程技术网
  • javascript/
  • Javascript 单击<；时如何显示确认对话框；a>；链接

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

javascript html

Javascript 单击<；时如何显示确认对话框；a>；链接,javascript,html,dom-events,Javascript,Html,Dom Events,我希望这个链接有一个JavaScript对话框，询问用户“你确定吗？是/否” 如果用户单击“是”，则应加载链接，如果单击“否”，则不会发生任何事情 我知道如何在表单中使用onclick运行返回true或false的函数。但是如何使用链接实现这一点？内联事件处理程序 以最简单的方式，您可以在内联onclick处理程序中使用该函数 <a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link<

我希望这个链接有一个JavaScript对话框，询问用户“你确定吗？是/否”
如果用户单击“是”，则应加载链接，如果单击“否”，则不会发生任何事情

我知道如何在表单中使用
onclick
运行返回
true
或
false
的函数。但是如何使用
链接实现这一点？

内联事件处理程序 以最简单的方式，您可以在内联
onclick
处理程序中使用该函数

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>
我建议避免使用在线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;
        }
    };
}​

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

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

由于事件处理附加到
主体
元素，该元素通常包含大量其他可单击的元素，因此我使用了一个临时函数（
actionToFunction
）来确定如何处理该单击。如果单击的元素是一个链接，因此有一个
标记名
为
a
，则单击处理将传递给
reallySure（）
函数

参考资料：


    

  • 

  • 

  • 

  • 

  • 

  • 

如果使用addEventListener（或attachEvent）附加事件处理程序，则此方法与上述任一答案略有不同

您可以将此处理程序附加到以下任一项：


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


或对于旧版本的internet explorer：


document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);



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


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


如果您有许多锚定标记，此方法将更有效。当然，将此事件添加到包含所有锚定标记的容器中时，效率会更高。
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>




...
...



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



echo”“；


我在第1段代码中对其进行了修改，然后根据需要运行。。我希望我能帮助需要我的人。
你也可以试试这个：


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



大多数浏览器不显示传递给
确认（）
的自定义消息

使用此方法，如果用户更改了任何
字段的值，则可以显示带有自定义消息的弹出窗口

您只能将此应用于某些链接，甚至页面中的其他HTML元素。只需将自定义类添加到所有需要确认和应用的链接，并使用以下代码：



$（文档）.ready（函数（）{
让未保存=错误；
//检测所有输入字段中的更改并设置“未保存”标志
$（“：输入”）.change（（）=>unsave=true）；
//单击时触发弹出窗口
$（'.hazard link'）。单击（函数（）{
if（未保存&&！window.confirm（“您确定要用核武器毁灭世界吗？”））{
return；//用户未确认
}
//没有未保存的更改或用户已确认
window.location.href=$（this.data（'destination'）；
});
});


发射核弹！

真的那么简单吗！我是不是很尴尬！我只是假设它只在表单上工作。确认对话框对每个可点击的元素都有效吗？@t确认对话框本身与特定元素无关。对于这样简单的事情，是否真的需要将HTML和JavaScript分开？如果将这样一个简单而简短的函数保留为内联函数，您会预见到什么问题？@CiaranG它总是这样开始：），然后添加这个和那个，等等。如果您能够实现关注点的分离，那么如果您去掉大多数内联处理程序，您会感觉更干净。它们只是在你的HTML中没有任何作用。至少在我看来，至少在大多数情况下。总有一些特殊情况-懒惰不应该是其中之一。@Ulysnep根据您的说明，在内联处理程序中省略
confirm（…）
之后的分号时出现错误。我无法复制，谢谢。短内联确认解决方案有效。你为什么建议避免内联代码？我通常远离内联CSS的原因很明显，但是在短javascript代码段中的原因是什么呢？正是因为同样的原因，内联CSS是不可取的，它更难维护，它会导致更混乱的HTML，如果需求发生变化，则需要进行大量的更新。我同意不使用内联处理程序的观点。但是，如果我们在脚本中附加处理程序，则应该使用高级模型（
addEventListener
）+1尽管如此。@bažmegakapa：我……倾向于同意；但是我必须承认，我还没有适应
addEventListener（）
模型。你可以用
if（check==true）
替换
if（check）
。如果你关心旧的IE，不要忘了
窗口。事件
。谢谢分享，当然你正在使用Javascript，您正在添加一个完整的库来处理一些非常简单的事情。值得吗？我不知道那个库，我会读到它，如果你把它用于其他目的，也许它值得额外的负载…两个库来完成这个简单的事情？我们如何实现@kapa给出的angularjs1.xAns是非常容易的，也不太麻烦。我想调用另一个js方法，它是调用conformation的成功。这是解决我问题的方法。

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



document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);



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



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



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



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



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