Question

我找到了这段代码

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

但是它不会阻止链接加载引用我如何使用与上面的一小段代码相同的事件监听器？

Answer 1

在普通浏览器中使用e.preventDefault()，在旧版IE浏览器中使用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()，所以只有当你使用与attachEvent()相同的回调函数时，才需要代码的IE部分{ {1}}我这样做。

Answer 2

你试过prevenDefault吗？这可以帮助您控制点击事件的功能。

此处的文档 - https://developer.mozilla.org/en/DOM/event.preventDefault

此外，在您的代码中。您从引用<a>标记切换为名为a_link的var和名为aLink的var。这是一个错字还是只是改变了你的实现？

Answer 3

如果你不打算加载它，为什么你的锚需要一个URL？难道你不能只使用“＃”或其他东西吗？

如何在单击代码中的链接时阻止该链接将此链接带到指向引用的页面

3 个答案: