有form标签的时候,点击里面的button按钮,或者a链接,会跳走,页面是达不到预想结果,是因为form和a标签都存在默认事件

这是一个录入信息的案例。当我点击“录入”的时候,页面数据顿闪后直接没了,检查代码又没有问题,调试也没有报错

img



    //判断非空
    btn.onclick = function () {
      if (uname.value.trim() == '' || age.value.trim() == '' || salary.value.trim() == '') {
        alert('输入内容不能为空')
        form.reset()
        return
      }
      //创建节点
      let tr = document.createElement('tr')
      //设置内容
      tr.innerHTML = `<td>${num++}</td>
          <td>${uname.value}</td>
          <td>${age.value}</td>
          <td>${gender.value}</td>
          <td>${salary.value}</td>
          <td>${city.value}</td>
          <td>
            <a href="javascript:" class="up">上移</a>
            <a href="javascript:" class="delete">删除</a>
            <a href="javascript:" class="down">下移</a>
          </td>`
      //添加节点
      tbody.appendChild(tr)
      form.reset()
    }

    //删除 事件委托
    tbody.onclick = function (e) {
      let tdd = e.target.parentElement.parentElement
      if (e.target.className == 'delete') {
        tbody.removeChild(tdd)
      } else if (e.target.className == 'up') {
        tbody.insertBefore(tdd, tdd.perviousElementSibling)
      } else if (e.target.className == 'down') {
        tbody.insertBefore(tdd, tdd.nextElementSibling.nextElementSibling)
      }
    }

img

form是用来定义表单的,我的button按钮是放在form表单里的,如果不阻止默认事件,它就会默认转到action中的页面去了,所以应该添加事件对象来阻止默认事件,所以只需在btn的点击事件中添加e.preventDefault()即可,另外,这条语句也可阻止a标签的默认跳转事件

btn.onclick = function (e) {
      e.preventDefault()
      if (uname.value.trim() == '' || age.value.trim() == '' || salary.value.trim() == '') {
        alert('输入内容不能为空')
        form.reset()
        return
      }

img

他的意思是 事件 加在 提交 和 a标签内了 事件触发了 但是因为他们都有默认事件 刷新了 网页
所以事件又没了
他告诉我们解决办法是 去除掉 他们的默认事件

应该是这样,绝对是这样 之前我也很好奇的 结果闪一下就没了 , 结果是a标签的默认刷新页面

这个应该放在你的文档里面 因为你的问题 你自己已经回答了 这也是你学习的总结 很好很好

你想问啥