HTML <a> 标签的小知识

在HTML中，<a>标签是实现页面跳转的一个神器，使用频率相当高，但是，在具体的开发过程中，我们在点击一个连接的同时，还想顺便做一些其他的事情，这样，很多人会选择Click事件，今天专门试验了一下，留个记录。

 

<a>标签在点击的时候会触发href来跳转，同时也会触发click事件，现象我大概分了如下3种：

 

触发click事件不跳转

<a onclick="alert('点击了'); return false;" href="http://www.baidu.com" > 测试链接 </a>

<a onclick="alert('点击了');" > 测试链接 </a>

<a href="#" onclick="alert('点击了');"> 测试链接 </a>

<a onclick="alert('点击了');" href="#"> 测试链接</a>

触发click事件后跳转

<a onclick="alert('点击了');" href="http://www.baidu.com"> 测试链接 <a>

只跳转不触发click

<a href="http://www.baidu.com" onclick="alert('点击了');"> 测试链接 <a>

 

通过上面的测试，我们可以看出，html的事件触发是有顺序的触发，可以通过修改时间顺序来掌握事件触发的顺序，如果Click事件在href前且返回值为false，跳转将不再触发