javascript - 添加子元素时跳转窗口

Question

如果需要，我正在使用 javascript appendchild 添加 mor 表单元素，但是当元素数量大于窗口大小时我遇到了问题。它使窗口跳到顶部并且很烦人。我将 div 设置得足够大，但它不起作用。

<div class="topnav" id="myTopnav">
  <a href="javascript:void(0);" style="font-size:15px;" class="icon active" onclick="myFunction()">&#9776;</a>

  <a href="#home" class="aactive">Home </a>
  <a href="#news">Edit</a>
  <a href="#about">Logout</a>
</div> 

<div class="frameHolder" id="frame1">
<fieldset class="frame">
<legend>information : </legend>
    <form action="#" method="post" id="contactform">
    <ul>
        <li class="liner">mobile :    </li>
        <li><input type="tel" name="mobiles[]" id="mobile0" class="txtfield" placeholder="09112345678" onBlur="mobilecheck('mobile0')"><a href="#" onClick="addfield('mobiles')"><font class="char">&#43;</font></a></li>
   <span class="error">A valid url is required</span>
       <li id="mobiles"> </li>      

        </ul>
        </form>
    </fieldset> 
</div>  

javascript部分是

<script>
var mobileCounter=0;
function addfield(args){

    var x = document.createElement("li");
    y=document.createElement("input");
    document.getElementById(args).appendChild(x);
if(args == "mobiles"){
    mobileCounter++;
    var idcounter="mobile" + mobileCounter;

    x.innerHTML="<input type=\"text\" id=\""+idcounter+"\" onblur=\"mobilecheck('"+idcounter+"')\" class=\"txtfield\">";
}
}
</script>

CSS 是

@font-face {
    font-family: iransans;
    font-style: normal;
    font-weight: normal;
    src: url("/fonts/IRANSansWeb_Bold.eot");
    src: url('/fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/fonts/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/fonts/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb_Bold.ttf') format('truetype');
}
a{
    text-decoration: none;
}

body {
    font-family: iransans;
    font-size: 12px;
  margin: 0;
  /*font-family: Arial, Helvetica, sans-serif;*/
}

.topnav {
  overflow: hidden;
  background-color: #E7FD00;
}

.topnav a {
  float: right;
  display: block;
  color: #020202;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #E00D00;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 400px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 400px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 1px;
      float: right;
    top: 0px;
  }
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;

  }

     .topnav.responsive .aactive {
      margin-top: 50px;
  }
    .frameHolder {
        margin: auto;
        margin-bottom: 40px;
        width: 300px;
        /*border: dotted #04F144;*/
    }

.frame{
    margin-top: 50px;
    border: solid #6F05E4;
    border-radius: 3%;
    padding:  20px 15px;
    direction: rtl;

}
li{
    display: block;
    text-decoration: none;
    /*border: solid #FF0C10;
    width: 200px;*/
    direction: rtl;
    text-align: right;
}

li .txtfield{
    width: 150px;

}
.char{
font-size: 24px;
    font-weight: bolder;
    color: #167C0A;
    margin-right: 5px;
}
.buffer{
    display: none;
    width: 1px;
    height: 0px;
    overflow: hidden;
}
.checkboxLabel{
    display: block;
    padding: 10px;
}
.button{
    padding: 5px 8px;
    margin-top: 12px;
    margin-left: 10px;
    border: solid 1px #14D14D;
    background-color: #F59F11;
    color:#090398;
    font-weight: bolder;

}
ul{
    margin-right: 25px;
    padding-right: 1px;
    width: 200px;
}

这个问题是appendchild方法的问题还是css设计的问题？我做了很多搜索，但没有答案。

Answer 1

跳转是由链接中的 href="#" 引起的:

<a href="#" onClick="addfield('mobiles')">…</a>

# 不是什么都不做的 URL – 它是 URL fragment链接到页面顶部。这是 anchor 链接功能的扩展，其中指定元素的 id，例如 #footer，会将页面滚动到具有该 id< 的元素.

要防止链接在单击时滚动窗口，您有两种选择:

• 将 href 更改为 javascript:void(0)，一个无操作 JavaScript URL。

• 在您的onclick 处理程序addfield 中，将点击事件作为参数并调用preventDefault()。在它上面以防止默认滚动行为:

  function addfield(event) {
      // your code to add the field
      event.preventDefault();
  }
  

有关在这些选项之间进行选择的帮助，请参阅 Which href value should I use for JavaScript links, # or javascript:void(0)?