Question

我有一个带有链接的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)
}

Answer 1

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

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来阻止默认链接行为

1 个答案: