Question

我试图通过单击超链接时调用Javascript函数的超链接将一些HTML数据插入div标签。

HTML数据有效，并且我要显示的项目出现了，但执行后立即消失了。

我尝试过event.preventDefault（），它在基于Chrome的浏览器上可以运行，但是在Firefox上不能运行。我已经在Javascript函数的末尾尝试过“ return false”，但是它不起作用。

代码如下：

<div id="doHere"></div>
<p>Toggle <a href="" onclick="toggle()">HERE</a> !!!</p>
<script>
  function toggle() {
    // event.preventDefault(); // Does not work on Firefox
    document.getElementById('doHere').innerHTML = '<ol><li> Test test </li></ol>';
    // return false; // Not working on both Chrome and Firefox
  }
</script>

如何确保编辑后的HTML是永久的？

Answer 1

尝试使用href的“＃”值

<div id="doHere"></div>
<p>Toggle <a href="#" onclick="toggle()">HERE</a> !!!</p>
<script>
  function toggle() {
    // event.preventDefault(); // Does not work on Firefox
    document.getElementById('doHere').innerHTML = '<ol><li> Test test </li></ol>';
    // return false; // Not working on both Chrome and Firefox
  }
</script>

Answer 2

在javascript:void(0);属性中使用href：

<html>
    <body>      
        <div id="doHere"></div>        
        <p>Toggle <a href="javascript:void(0);" onclick="toggle()">HERE</a> !!!</p>        
        <script>
            function toggle() {
                document.getElementById('doHere').innerHTML = '<ol><li> Test test </li></ol>';
            }
        </script>
    </body>
</html>

Answer 3

在Firefox中，没有全局event属性，您将收到以下错误：

ReferenceError：未定义事件

要解决此问题，您必须将event属性传递给函数，以便可以在函数内部引用该函数：

<html>
    <body>      
        <div id="doHere"></div>        
        <p>Toggle <a href="" onclick="toggle(event)">HERE</a> !!!</p>        
        <script>
            function toggle(e) {
                e.preventDefault();
                document.getElementById('doHere').innerHTML = '<ol><li> Test test </li></ol>';
            }
        </script>
    </body>
</html>

重置之前，JavaScript AppendChild会显示一小会儿

3 个答案: