Question

在我正在使用的其中一个网络应用程序中开始显示的模式是以前只是常规标签链接的链接现在需要一个弹出框询问“你确定吗？”链接之前会去。（如果用户点击取消，则没有任何反应。）

我们有一个可行的解决方案，但不知怎的，我们是一个没有Javascript专家的网络应用商店，所以我留下了这种爬行的感觉，就像有更好的方法来完成工作。

那么，JS专家，什么是最符合标准的跨浏览器方式来完成这项工作？

（为了记录，这已经是一个需要JS的网站，所以不需要有“非JS”版本。但是，它确实需要在任何和所有合理的现代浏览器中工作。）

（另外，对于奖励积分，如果关闭JS的人没有链接工作，而不是绕过确认框，那将是很好的。）

Answer 1

不引人注目的Javascript

最佳做法是向链接添加事件处理程序方法。

confirm（）函数会生成您描述的对话框，并根据用户的选择返回true或false。

链接上的事件处理程序方法有一个特殊的行为，即如果它们返回false，它们会终止链接操作。

var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    return confirm("Are you sure?");
};

如果您想要指向需要javascript 的链接，则必须修改HTML。删除href：

<a href="#" id="confirmToFollow"...

您可以在事件处理程序中显式设置链接目标：

var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    if( confirm("Are you sure?") ) {
        window.location = "http://www.stackoverflow.com/";
    }
    return false;
};

如果你想在多个链接上调用相同的方法，你可以获取你想要的链接的nodeList，并在循环通过nodeList时将方法应用于每个：

var allLinks = document.getElementsByTagName('a');
for (var i=0; i < allLinks.length; i++) {
    allLinks[i].onclick = function () {
        return confirm("Are you sure?");
    };
}

此处有相同想法的进一步排列，例如使用类名来确定哪些链接将侦听方法，以及根据其他一些条件将唯一位置传递到每个链接。他们是六个人之一，另外六个人。

替代方法（不鼓励的做法）：

一个气馁的做法是通过 onclick属性附加方法：

<a href="mypage.html" onclick="...

另一个气馁的做法是将 href属性设置为函数调用：

<a href="javascript: confirmLink() ...

请注意，这些不鼓励的做法都是有效的解决方案。

Answer 2

以下是我们一直在做的事情：

<a href="#" onClick="goThere(); return false;">Go to new page</a>`

function goThere() 
{ 
   if( confirm("Are you sure?") ) 
    { 
       window.location.href="newPage.aspx"; 
    } 
}

（编辑：重新格式化代码以避免水平滚动）

Answer 3

<a href="http://..." onclick="return confirm('are you sure?')">text</a>

Answer 4

如果你使用jQuery，你会这样做：

jQuery(document).ready(
    jQuery("a").click(){
        //you'd place here your extra logic
        document.location.href = this.href;
    }
);

Answer 5

在jquery中它类似于：

$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});

如果我理解jgreep提到的内容，如果您只希望确认出现在几个链接上，则只能将click处理程序绑定到具有正确类的链接。您只能为锚点或任何具有该类的html元素执行此操作。

$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();});

Answer 6

类绑定版本（不需要内联onclick属性）：链接此外部＆lt;脚本＆GT;在所有可确认的控制之后：

// dangerous - warnings on potentially harmful actions
// usage: add class="dangerous" to <a>, <input> or <button>
// Optionally add custom confirmation message to title attribute

function dangerous_bind() {
    var lists= [
        document.getElementsByTagName('input'),
        document.getElementsByTagName('button'),
        document.getElementsByTagName('a')
    ];
    for (var listi= lists.length; listi-->0;) { var els= lists[listi];
        for (var eli= els.length; eli-->0;) { var el= els[eli];
            if (array_contains(el.className.split(' '), 'dangerous'))
                el.onclick= dangerous_click;
        }
    }
}

function array_contains(a, x) {
    for (var i= a.length; i-->0;)
        if (a[i]==x) return true;
    return false;
}

function dangerous_click() {
    return confirm(this.title || 'Are you sure?');
}

dangerous_bind();

由于对提交/按钮的绑定工作，这有点长篇大论。一般来说，虽然有“危险”选项是有意义的，但您需要确认按钮而不是链接。链接触发的GET请求实际上不应该有任何有效的效果。

Answer 7

var links = document.getElementsByTagName('A');

for (var i = 0; i < links.length; i++)
{ 
    links[i].onclick = function ()
    {       
       return Confirm("Are you sure?");
    }
}

这会将消息应用于所有链接，但是如果没有自动使用javascript，链接将无法正常工作（实际上是不可能的）会更加困难。

Answer 8

看看What’s the best way to open new browser window。你可以做类似的事情，但在打开一个新窗口之前抛出确认。

用JS函数替换链接的最佳方法是什么？

8 个答案: