Javascript链接与表单跳转的一个问题

key

1. <script type="text/javascript">
   
2. window.onload=initPage;
   
3. 
   
4. var globalCounter = 1;
   
5. 
   
6. function initPage()
   
7. {
   
8.   document.getElementById('href-test').onclick=doHref;
   
9.   document.getElementById('form-test').onsubmit=doForm;
   
10. }
    
11. 
    
12. function doHref()
    
13. {
    
14.   document.getElementById('result').innerHTML += '
    
15. ' + this.innerHTML + globalCounter++;
    
16.   return false;
    
17. }
    
18. 
    
19. function doForm()
    
20. {
    
21.   document.getElementById('result').innerHTML += '
    
22. ' + this.inputValue.value + globalCounter++;
    
23.   return false;
    
24. }
    
25. </script>
    
26. 
    
27. <form id="form-test" action="#" method="get">
    
28. <input name="inputValue" />
    
29. </form>
    
30. 
    
31. <p>
    
32. <a href="#" id="href-test">hello</a>
    
33. </p>
    
34. <p>
    
35. <span id='result'></span>
    
36. </p>

复制代码

key

1. <script type="text/javascript">
   
2. //window.onload=initPage;
   
3. 
   
4. var globalCounter = 1;
   
5. 
   
6. function initPage()
   
7. {
   
8.   document.getElementById('href-test').onclick=doHref;
   
9.   document.getElementById('form-test').onsubmit=doForm;
   
10. }
    
11. 
    
12. function doHref(obj)
    
13. {
    
14.   document.getElementById('result').innerHTML += '
    
15. ' + obj.innerHTML + globalCounter++;
    
16.   return false;
    
17. }
    
18. 
    
19. function doForm(obj)
    
20. {
    
21.   document.getElementById('result').innerHTML += '
    
22. ' + obj.inputValue.value + globalCounter++;
    
23.   return false;
    
24. }
    
25. </script>
    
26. 
    
27. <form id="form-test" action="#" method="get" onsubmit="javascript:doForm(this)">
    
28. <input name="inputValue"/>
    
29. </form>
    
30. 
    
31. <p>
    
32. <a href="#" id="href-test" onclick="javascript:doHref(this)">hello</a>
    
33. </p>
    
34. <p>
    
35. <span id='result'></span>
    
36. </p>

复制代码

coredump

什么是问题？

key

但出来的结果非常不同。
通过return false，在代码一里，整个处理都很正常。
但在代码二里，form出来的结果是非常不同的，根本就显示不了，因为跳转了；而link则可以显示，但多了个#的大尾巴。

其实问题就在于网页跳转。我想知道，为什么用代码二，我明明return了false，但还是出现网页的跳转？而且在代码二中，我也不能采用this关键字，只能传值到函数中。

coredump

我觉得是因为用的onsubmit的原因吧

coredump

你试试把 onsubmit="javascript:doForm(this)"
改成：
onsubmit="return doForm(this);"

key

原帖由 coredump 于 20-6-2009 11:47 发表

                               
登录/注册后可看大图

你试试把 onsubmit="javascript:doForm(this)"
改成：
onsubmit="return doForm(this);"

嗯，的确是这个问题。所以，这个东西验证了直接在html里面写onsubmit=与在onload里装配一个.onsubmit=是完全不同的东西来的，
对不？

coredump

Javascript有太多tricky的地方，不同的引擎和执行环境效果也不同，只能多试了，没有办法。