JavaScript 仅使用外部 JavaScript 来防止默认链接行为

我有一个带有链接的javascript外部文件。仅使用 javascript，如何取消链接的默认行为？（即返回假）。我需要在不向 HTML 中添加 javascript 代码或使用任何 innerHTML 的情况下执行此操作。我需要在外部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)
}

你应该得到这样的链接元素：

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

这取决于您的需求（我认为第二个选项将更适合您的要求）。

相关内容

最新更新

热门标签：