这是前两天的代码刚刚遇到的一个问题:
一个普通的条件查询:
- <form>
- 用户名:<input type="text" id="userName">
- 登录名:<input type="text" id="loginName">
- <a href="" onclick="search()">搜索</a>
- </form>
接下来的问题就是:
search()中提交的url,总是会被执行两次。
问题的根源:
<a>标签的href和onclick
详解:
如果同时存在href和onclick,首先执行onclick事件,其次是href属性下的动作。
如果想让href属性下的动作不执行,那onclick必须得到一个false的返回值,或者将href的属性设置为无效链接。即:
- <a href="#" onclick="search();return false;">搜索</a>
- <a href="javascript:void(0)" onclick="search()">搜索</a>
- <a href="#" onclick="search();event.returnValue=false">搜索</a>
#和javascript:void(0)是常见的两个href属性,其区别是javascript:void(0)没起实质上的作用,仅仅是一个死链接,执行的是onclick的事件,"#"包含了一个位置信息默认的锚#top,也就是网页的上端。如果页面过长,有滚动条,且希望通过onclick事件执行操作,应将它的href属性设置为javascript:void(0),而不是#,以防止不必要的页面跳动。