我有一个带有链接的 JavaScript 外部文件。仅使用 JavaScript，如何取消链接的默认行为？ (即返回 false)。我需要在不向 HTML 添加 javascript 代码或使用任何 insideHTML 的情况下执行此操作。我需要在外部 javascript 文件中的函数内执行此操作。另外，不能使用 jQuery 或类似 jQuery 的任何东西。这是初学者的东西，所以我不能使用任何复杂的 JavaScript。只需要用最少的代码来使用最佳实践。我将在下面包含我的 javascript 和 html。我的问题从第 5 步及以上的 javascript 代码开始。谢谢，杰森
* HTML*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Assignment 7</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="content">
<h1>Do you have JavaScript enabled?</h1>
<p id="noJS">No! You do <strong>not</strong> have JavaScript enabled!</p>
<p id="extraCredit" ><a href="http://www.w3schools.com/tags/tag_a.asp">What does this link do?</a></p>
</div>
</body>
</html>
* JavaScript(到目前为止)*
function hideMessage() {
// Get elements that I will need
var content = document.getElementById('content');
var noJS = document.getElementById('noJS');
var extraCredit = document.getElementById('extraCredit');
var link = document.getElementsByClassName('a');
// Step 1: Hide the “no JavaScript” message using pure JavaScript on page load. No CSS or class name switching allowed. (DONE)
noJS.parentNode.removeChild(noJS);
// Create new elements that I will need
var newPara = document.createElement('p');
var strong = document.createElement('strong');
// Step 2: Show the new “yes JavaScript” message in a new paragraph on page load. (DONE)
var beginNewParaText = document.createTextNode('Yes! You ');
var strongNewParaText = document.createTextNode('do ');
var endNewParaText = document.createTextNode('have JavaScript enabled!');
// add(append) new elements and text
noJS.appendChild(newPara);
content.insertBefore(newPara, extraCredit);
// Step 3: Set the ID of the new message to “yesJS” so it turns green (as per the provided CSS). (DONE)
newPara.setAttribute('id', 'yesJS');
newPara.appendChild(beginNewParaText);
// Step 4: In the new message, “do” appears <strong>. (DONE)
newPara.appendChild(strong);
strong.appendChild(strongNewParaText);
newPara.appendChild(endNewParaText);
// Step 5: Cancel the default behavior of the link. (NOT DONE)
// Step 6: Display a message of your choice in a paragraph below the link when the link is clicked. (NOT DONE)
// Step 9: Produce function modularity. You don’t have everything crammed into a single function. (NOT DONE)
// You can probably do everything you need in three functions. (NOT DONE)
// Step 10: Works in both Firefox and Internet Explorer. (NOT DONE)
}
最佳答案
您应该获得如下所示的 link 元素:
var link = document.getElementsByTagName('a')[0];
或者分配一个 id 并使用会更简洁:
var link = document.getElementById('extraCreditBtn');
然后您可以在第5步中更改href属性:
link.href = "http://stackoverflow.com/questions/12850809/javascript-prevent-default-link-behavior-using-only-external-javascript";
或者您可以执行类似的操作来阻止点击操作。
link.onclick = function () {
alert("click on <a>");
return false;
};
这取决于您的需求(我认为第二个选项更适合您的需求)。
关于JavaScript 仅使用外部 JavaScript 来防止默认链接行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12850809/