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

Question

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

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

那么,JS专家,最符合标准的跨浏览器方式是什么？

(为了记录,这已经是一个需要JS的站点,所以不需要有"非JS"版本.但是,它确实需要在任何和所有合理的现代浏览器中工作.)

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

Answer 1

不引人注目的Javascript

最佳实践是向链接添加事件处理程序方法.

该确认()函数产生你所描述的对话框,并根据用户的选择返回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"; 
    } 
}

(编辑:重新格式化代码以避免水平滚动)