1

リンクのあるjavascript外部ファイルがあります。javascriptのみを使用して、リンクのデフォルトの動作をキャンセルするにはどうすればよいですか？（つまり、falseを返します）。HTMLにjavascriptコードを追加したり、innerHTMLを使用したりせずにこれを行う必要があります。外部のjavascriptファイルにある関数内でそれを行う必要があります。また、jQueryやjQueryのようなものは使用できません。これは初心者向けなので、複雑なJavaScriptは使用できません。最小限のコードでベストプラクティスを使用する必要があります。以下にJavaScriptとHTMLを含めます。私の問題は、JavaScriptコードのステップ5以降から始まります。ありがとう、ジェイソン

* 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)
}
4

1 に答える 1

0

次のようなリンク要素を取得する必要があります。

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

それはあなたのニーズに依存します（私は2番目のオプションがあなたの要件によりよく合うと思います）。

于 2012-10-12T04:29:22.017 に答える