2012-03-04 64 views
1

我发现这个代码我如何防止被点击代码中的链接时,这个链接带我去,使参考

<body> 
<div id="div1"> 
What is 2+2? 
</div> 
<div id="div2"> 
<a href="answer.html" id="answer_link">Get the answer</a> 
</div> 
</body> 

随后的JavaScript

var d1 = document.getElementById("div1"); 
var a_link = document.getElementById("answer_link"); 
a_link.onclick = function() 
{ 
    d1.innerHTML = "That is easy, the answer is <strong>4</strong>!"; 
    return false; 
}; 

所以这段代码的页面因为它更改div1 中的内部html,并且不会加载链接所引用的页面,但如果我想使用事件侦听器呢? 我写这篇文章

a_link.addEventListener('click', function(){ 
    d1.innerHTML = "That is easy, the answer is <strong>4</strong>!"; 
    return false; 
}, false); 

但它不会阻止加载参考链接我如何使用事件侦听器的工作方式相同的是,小片的上面的代码?

回答

3

使用老年IE浏览器e.preventDefault()正常浏览器和event.returnValue

aLink.addEventListener('click', function(e){ 
    d1.innerHTML = "That is easy, the answer is <strong>4</strong>!"; 
    if (e && e.preventDefault) { 
     e.preventDefault(); 
    } else { 
     window.event.returnValue = false; // guess who - IE 
    } 
}, false); 

事实上,旧版本的IE不支持甚至addEventListener(),所以代码的IE一部分,如果你只需要使用与attachEvent()相同的回调函数,因为我使用addEventListener()

+0

:o那真的起作用了,你能向我解释一下哪里来自e参数?并感谢您的帮助:) – Alejandro 2012-03-04 05:33:06

+0

e参数是addEventListener触发事件时的一部分。这是事件对象。不幸的是,旧版本的IE不通过它。 – jfriend00 2012-03-04 05:42:57

+0

好的再次感谢jfriend00我正在学习语言,所以这将帮助我很多对不起,如果这是一个愚蠢的问题,谢谢 – Alejandro 2012-03-04 05:45:25

0

为什么你的锚点需要一个URL,如果你不打算加载它?你不能只使用“#”或什么的?

+0

'#'为href仍然可以导致页面跳转。与其他答案一样,最好阻止链接的处理。 – jfriend00 2012-03-04 05:36:48

+0

哦,好的:/我还没有为2年的网站编码:p – Snailer 2012-03-04 05:38:00

相关问题