sunshine-smile_lr 2022-03-04 18:53 采纳率: 0%
浏览 84

有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

  • 写回答

2条回答 默认 最新

  • 随风4928579 2022-03-04 19:48
    关注

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

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

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

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 3月4日

悬赏问题

  • ¥20 python爬虫遇到空文本取不出来
  • ¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
  • ¥15 curl 命令调用正常,程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥15 使用百度地图api 位置函数报错?
  • ¥15 metamask如何添加TRON自定义网络
  • ¥66 关于川崎机器人调速问题
  • ¥15 winFrom界面无法打开
  • ¥30 crossover21 ARM64版本安装软件问题
  • ¥15 mymetaobjecthandler没有进入