这是一个录入信息的案例。当我点击“录入”的时候,页面数据顿闪后直接没了,检查代码又没有问题,调试也没有报错
//判断非空
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)
}
}
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
}
他的意思是 事件 加在 提交 和 a标签内了 事件触发了 但是因为他们都有默认事件 刷新了 网页
所以事件又没了
他告诉我们解决办法是 去除掉 他们的默认事件
应该是这样,绝对是这样 之前我也很好奇的 结果闪一下就没了 , 结果是a标签的默认刷新页面
这个应该放在你的文档里面 因为你的问题 你自己已经回答了 这也是你学习的总结 很好很好
你想问啥