在Html中，<a/>标签表示超链接，它的href属性表示要跳转的地址。但是有时候我们想在单击某个连接的时候执行一个JavaScript函数或者一段JavaScript代码，这时就可以使用void搭配Js函数来实现。
1.href与void
在<a/>的href属性中使用"javascript:"加上想要执行的代码来达到点击执行Js代码的目的。但是当这些Js代码的最终返回值或对象不是undefined的话（函数的默认返回值是undefined），网页的内容会被替换成表示该返回值或对象的字符串（使用toString()转换）。（Chrome中不存在该现象。）因此要使用void来忽略函数返回的值或对象。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>voidTest.html</title>
<script type="text/javascript">
//测试函数，当单击链接的时候弹出信息
function voidTest()
{
alert("Test!");
return "From voidTest()"; //返回字符串
}
</script>
</head>
<body>
<!-- 期待的效果是单击链接弹出信息，不改变页面结构和内容 -->
<br>
<!-- 不使用void，点击后整个页面只有From voidTest()（Chrome不影响） -->
<a href="javascript:voidTest()">Without void!</a>
<br> <br>
<!-- 使用void，点击后页面内容不改变 -->
<a href="javascript:void voidTest()">With void!</a>
<br> <br>
<!-- 也可以加括号 -->
<a href="javascript:void(voidTest())">With void()!</a>
</body>
</html>
2.href、onclick与void
当我们希望单击链接的时候执行一些Js函数，并且希望由链接的click事件触发，这个时候也要使用void来阻止超链接的跳转。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>voidTest.html</title>
<script type="text/javascript">
//测试函数，当单击链接的时候弹出信息
function voidTest()
{
alert("Test!");
}
</script>
</head>
<body>
<!-- 期待的效果是单击链接弹出信息 -->
<!-- 不加href，<a/>显示成普通文字而不是超链接，onclick事件无法触发 -->
<a onclick="voidTest">Without href!</a>
<br><br>
<!-- 添加空的href属性，点击时会重载该页面 -->
<a href="" onclick="voidTest">With empty href!</a>
<br><br>
<!-- href属性为void，正常 -->
<a href="javascript:void" onclick="voidTest()">With javascript:void in href!</a>
<br><br>
<!-- href属性为void(0)，正常 -->
<a href="javascript:void(0)" onclick="voidTest()">With javascript:void(0) in href!</a>
</body>
</html>
分享到：
相关推荐
＜字符＞ ::= ＿｜a｜．．．｜z｜A｜．．．｜Z ＜数字＞ ::= ０｜＜非零数字＞ ＜非零数字＞ ::= １｜．．．｜９ ＜字符串＞ ::= "｛<合法字符> }" //字符串中可以出现所有合法的可打印字符集中的字符 ＜程序＞...
＜字符＞ ::= ＿｜a｜．．．｜z｜A｜．．．｜Z ＜数字＞ ::= ０｜＜非零数字＞ ＜非零数字＞ ::= １｜．．．｜９ ＜字符串＞ ::= "｛<合法字符> }" //字符串中可以出现所有合法的可打印字符集中的字符 ＜程序＞...
<a href="javascript:void(null)">防止离开</a> ``` 通过使用`void(null)`表达式，可以确保点击链接不会有任何实际动作发生，从而避免用户误操作导致页面关闭。 #### 8. 自动换行和表格布局 为了确保表格内容在不同...
<a>跳转到div</a> <div di=dction_1> 这里是被跳转的区域 </div> 第二个，使用jquery添加或者移除class属性 也很简单，使用jquery的方法addclass()和removeclass()属性就可以完成了。 其次，jquery的代码必须写到 ...
<li><a href="[removed]void(0);">图书介绍</a></li> <li><a href="[removed]void(0);">新书预告</a></li> <li><a href="[removed]void(0);">图书销售</a></li> <li><a href="[removed]void(0);">刊物发布</a></...
<a href="[removed]void(0)">X</a> <div class="line"></div> </li> <li> <span>CSS</span> <a href="[removed]void(0)">X</a> <div class="line"></div> </li> <li> <span>jQuery</span> <a href="...
/// <param name="pLanguage"> Language name (as a std::string). Must belong to the languages available in TTS. </param> /// <returns> Encoding of the specified language. </returns> public String ...
/// 进行玩家A与玩家B坐标是否越界的判断 /// </summary> static void CheckPos() /// <summary> /// 玩家掷骰子 /// </summary> /// <param name="playerNumber"></param> static void Action(int ...
/// <param name="map">地图对象</param> public AStar(Map map) { this.map = map; } /// <summary> /// /// </summary> /// <param name="map">地图对象</param> /// <param name="start">起点坐标</...
<li><a title="" href="javascript:void(0);"><img alt="" src="pics/1.jpg"></a></li> <li><a title="" href="javascript:void(0);"><img alt="" src="pics/2.jpg"></a></li> <li><a title=...
<br/> }<br/>//生成随机验证码串<br/>private void Generate_control(int max_charnum, int min_charnum)<br/> {<br/> if (4 >= min_charnum && 4 <= max_charnum)<br/> poem_available = true;<br/> if (5 >= ...
<a href="javascript:void();">点我丫 3</a> ``` 这些链接不会跳转到新的页面，而是触发JavaScript代码。 5. **图片插入与样式调整** 使用`<img>`标签插入图片，`src`属性指定图片源，`width`属性设置宽度。...
<tr><td colspan="5"><a href="input">添加用户</a></td></tr> <tr> <td> <s:if test="page.hasFirst"><a href="list-users?page.pageNow=<s:property value="1"/>">首页</a></s:if> <s:if test="page.hasPre"><a ...
number=5">Calculate Square</a> </body> </html> ``` **SquareServlet.java** ```java import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet....
<div class="plus-tag tagbtn clearfix" id="myTags"></div> <div class="plus-tag-add"> <form id="" action="" ... <a href="javascript:void(0);">展开推荐标签</a> </li> </ul> </form> </div>
href="javascript:void(0)">自适应宽度的标签</A> </LI></UL> <DIV id=tagContent> <DIV class=tagContent id=tagContent0>第一个标签的内容</DIV> <DIV class="tagContent selectTag" id=tagContent1>第二个标签的...
/// <param name="text"></param> private void AppString(sendData sendDatas) { int i = forms(sendDatas.fromIP); if (arryFrom[i].Forms.InvokeRequired == true) { arryFrom[i].Forms.Invoke...
/// Initializes a new instance of the <see cref="T:ConnectionBase"/> class. /// </summary> /// <param name="from">From.</param> /// <param name="to">To.</param> protected ConnectionBase(Point ...
<li class="thisStyle"><a href="javascript:void(0)">目录</a></li> <li><a href="javascript:void(0)">选项1</a></li> <li><a href="javascript:void(0)">选项2</a></li> <li><a href="javascript:void(0)">...
<td class="padding"><a id="aSub1" class="btn_logintwo" href="javascript:void(0);"><span>确认修改</span></a></td> </tr> </table> </div> <div class="table" id="con_one_2" style="display:none...