如何使用Javascript阻止Anchor标记的默认操作？

Question

我正在尝试阻止对锚点("a")标记的默认操作.在我的场景中,使用ajax(在提交表单之后)动态渲染几行html并且我想添加一个事件监听器

1. 单击新创建的链接时执行操作

2. 阻止浏览器打开该链接.

这就是我写的:

a = document.getElementById("new_link");
a.addEventListener("click",function(){alert("preform action");
                                      return false;},false);

我也尝试过:

a.addEventListener("click",function(e){e.preventDefault(); alert("preform action");});

当我点击链接"a"时,它会显示警告消息,但仍会打开"href"链接,我希望它显示该消息,然后停止.

如果附加到预先存在的链接,这两种方法都会显示警报,但是当附加到新插入的链接时(通过ajax),这两种方法都不起作用..这就是我需要做的.

任何帮助/建议.

谢谢.

Answer 1

使用jQuery库,您可以通过调用作为回调参数传递的事件的.preventDefault()方法来停止绑定到jQ对象(在本例中为所有元素)的事件.

试试这个:

$('a').click( function(e) {
  e.preventDefault();
  alert("perform action");
});

Answer 2

重温一个老话题，但我想提供一个不依赖于 jQuery 的选项。

a = document.getElementById("new_link");
a.addEventListener("click",function(){
     alert("preform action");
     window.event.preventDefault();
},false);

Answer 3

您可以使用jquery-nolink插件背后的想法并执行以下操作：

$('new_link').attr("href", "javascript:void(0);");