废话不说,直接上demo
首先小编模拟了这些元素在form中的情况,这种情况在项目中经常遇到的。
<form>
<input type="button" id="test1" οnclick="test1();" value="测试1"/>
<input type="button" name="test2" οnclick="test2();" value="测试2"/>
<input type="button" id="test3" οnclick="test4();" value="测试3"/>
<input type="button" name="test4" οnclick="test3();" value="测试4"/>
<img src="" name="test5" οnclick="test5();" alt="测试5">
<div id="test6" οnclick="test6();">测试6</div>
<a href="#" name="test7" οnclick="test7();">测试7</a>
</form>
<script type="text/javascript">
function test1(){
alert("测试1");
}
function test2(){
alert("测试2");
}
function test3(){
alert("测试4");
}
function test4(){
alert("测试3");
}
function test5(){
alert("测试5");
}
function test6(){
alert("测试6");
}
function test7(){
alert("测试7");
}
</script>
结果如下图,除了div和a会正常显示,其他的都会报错“TypeError: test is not a function”
如果将form标签去掉,所有标签都放出来呢?
<input type="button" id="test1" οnclick="test1();" value="测试1"/>
<input type="button" name="test2" οnclick="test2();" value="测试2"/>
<input type="button" id="test3" οnclick="test4();" value="测试3"/>
<input type="button" name="test4" οnclick="test3();" value="测试4"/>
<img src="" name="test5" οnclick="test5();" alt="测试5">
<div id="test6" οnclick="test6();">测试6</div>
<a href="#" name="test7" οnclick="test7();">测试7</a>
<script type="text/javascript">
function test1(){
alert("测试1");
}
function test2(){
alert("测试2");
}
function test3(){
alert("测试4");
}
function test4(){
alert("测试3");
}
function test5(){
alert("测试5");
}
function test6(){
alert("测试6");
}
function test7(){
alert("测试7");
}
</script>
结果如下图,除了img报错,其他的都会正常显示
input在form下会报错,在去除form后恢复正常
div a中id或name和方法名和可以相同
尽管这样,但还是强烈反对在开发中id或name的命名和function方法名相同!!!
解决方法:只要稍加注意,在命名时保证id或name和function方法名不一致即可。
小编一直想,同样都是DOM对象,为什么会有如此大的差别?造成这种现象的原因是什么?无奈小编技术水平有限,暂且搁置这个不是问题的问题。