FreeOZ论坛

标题: Javascript链接与表单跳转的一个问题 [打印本页]
作者: key    时间: 20-6-2009 11:26
标题: Javascript链接与表单跳转的一个问题
  1. <script type="text/javascript">
  2. window.onload=initPage;

  4. var globalCounter = 1;

  6. function initPage()
  7. {
  8.   document.getElementById('href-test').onclick=doHref;
  9.   document.getElementById('form-test').onsubmit=doForm;
  10. }

  12. function doHref()
  13. {
  14.   document.getElementById('result').innerHTML += '
  15. ' + this.innerHTML + globalCounter++;
  16.   return false;
  17. }

  19. function doForm()
  20. {
  21.   document.getElementById('result').innerHTML += '
  22. ' + this.inputValue.value + globalCounter++;
  23.   return false;
  24. }
  25. </script>

  27. <form id="form-test" action="#" method="get">
  28. <input name="inputValue" />
  29. </form>

  31. <p>
  32. <a href="#" id="href-test">hello</a>
  33. </p>
  34. <p>
  35. <span id='result'></span>
  36. </p>
复制代码
作者: key    时间: 20-6-2009 11:30
标题: 代码二
  1. <script type="text/javascript">
  2. //window.onload=initPage;

  4. var globalCounter = 1;

  6. function initPage()
  7. {
  8.   document.getElementById('href-test').onclick=doHref;
  9.   document.getElementById('form-test').onsubmit=doForm;
  10. }

  12. function doHref(obj)
  13. {
  14.   document.getElementById('result').innerHTML += '
  15. ' + obj.innerHTML + globalCounter++;
  16.   return false;
  17. }

  19. function doForm(obj)
  20. {
  21.   document.getElementById('result').innerHTML += '
  22. ' + obj.inputValue.value + globalCounter++;
  23.   return false;
  24. }
  25. </script>

  27. <form id="form-test" action="#" method="get" onsubmit="javascript:doForm(this)">
  28. <input name="inputValue"/>
  29. </form>

  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    时间: 20-6-2009 11:32
什么是问题？
作者: key    时间: 20-6-2009 11:33
标题: 这两段代码几乎就没有区别
但出来的结果非常不同。
通过return false，在代码一里，整个处理都很正常。
但在代码二里，form出来的结果是非常不同的，根本就显示不了，因为跳转了；而link则可以显示，但多了个#的大尾巴。

其实问题就在于网页跳转。我想知道，为什么用代码二，我明明return了false，但还是出现网页的跳转？而且在代码二中，我也不能采用this关键字，只能传值到函数中。
作者: coredump    时间: 20-6-2009 11:39
我觉得是因为用的onsubmit的原因吧
作者: coredump    时间: 20-6-2009 11:47
你试试把 onsubmit="javascript:doForm(this)"
改成：
onsubmit="return doForm(this);"
作者: key    时间: 20-6-2009 11:50
原帖由 coredump 于 20-6-2009 11:47 发表

                               
登录/注册后可看大图

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


嗯，的确是这个问题。所以，这个东西验证了直接在html里面写onsubmit=与在onload里装配一个.onsubmit=是完全不同的东西来的，
对不？
作者: coredump    时间: 20-6-2009 14:16
标题: 回复 #7 key 的帖子
Javascript有太多tricky的地方，不同的引擎和执行环境效果也不同，只能多试了，没有办法。



欢迎光临 FreeOZ论坛 (https://www.freeoz.org/ibbs/) Powered by Discuz! X3.2