A标签使用javascript:伪协议

1、前言

今天，遇到一个别人挖的坑，问题是这样的。

作了一个列表页，能够筛选数据，有不少筛条件。主要是有input复选框和<a>标签两种。如图：

 

 

其中房价的筛选条件使用<a>标签，代码以下

1 <a href="javascript:;" name="price">150元-300元</a>

 

用javascript:; 来阻止了a标签跳转连接。

可是，却发如今IE下面点击a标签，竟然清除了其余input复选框的筛选项，what？

第一次碰到这种状况，而后我仔细研究了一番，发现是伪协议搞的鬼。那么咱们一块儿看看这究竟是怎么回事。 

 

2、什么是伪协议

伪协议不一样于因特网上所真实存在的协议，如http://，https://，ftp://，

而是为关联应用程序而使用的.如:tencent://(关联QQ)，data:(用base64编码来在浏览器端输出二进制文件)，还有就是javascript:

咱们能够在浏览地址栏里输入"javascript:alert('JS!');"，点转到后会发现，其实是把javascript:后面的代码当JavaScript来执行，并将结果值返回给当前页面。

 

3、深刻代码找问题

想了半天实在想不出因此然，而后我返回页面看这个<a>标签， 难道是javascript:;这个写法有问题？

因而我改为了我经常使用javascript:vioid(0);写法，可是问题依然没有解决。真是奇怪。。。

 

心烦意乱，而后打算先跳出这个问题，看了一看javascript:void(0);和javascript:;的区别：

 

其实两种都是javascript：URL 的形式，在浏览器打开javascript：URL的时候，它会先运行URL中的代码，当返回值不为undefined的时候，前页连接会替换为这段代码的返回值。

javascript:void(0), 咱们知道void运算符会对给定的表达式进行求值，而后直接返回 undefined，javascript:; 也是返回 undefined，因此两种方法是等价的。

 

回到问题自己，想一想好奇怪，为何点击<a>标签会取消其余input复选框的选中呢？

由于是维护别人的代码，因此忽然想到，会不会是有代码执行了这个操做，因而我搜索了一下代码，看哪里执行了取消input复选框的选中操做。

很快，我就定位到了页面中onbeforeunload函数中执行了取消input复选框选中的操做，估计写这段代码的同窗，是想要在页面销毁以前取消input的选中，

避免浏览器前进后退复选框仍选中，形成数据不符的问题。

 

到了这一步，问题清晰了一点，那么只须要测试，是否在IE下，点击这种写有javascript:;的a标签会触发onbeforeunload。

因而我打开浏览器作了测试，果然在ie9及其如下的浏览器触发了这个事件。

 

虽然以前就知道IE中a标签事件调用顺序：onclick->window.onbeforeunload->href ，可是一般页面中不多会使用onbeforeunload方法，不少时候是忽略的。

 

最后说一下个人解决办法，

在<a>标签绑定的click事件中，使用event.preventDefault();取消它的默认行为，页面能够正常运行了。

不知道你们有没有其余更好的方法，有的话，还但愿你们在留言中告诉我，多多交流。

 

4、聊聊a标签使用伪协议

问题终于解决了，让咱们放松心情，聊聊<a> 标签使用javascript:伪协议吧。一般咱们为<a>标签增长href属性，通常有两个目的：

1. 跳转到指定的页面，也就是:link选择器能够选择到它。

2. 有href属性的<a>标签才有cursor：pointer的效果，特别实在低版本浏览器里面。

 

下面咱们主要是聊聊不想要<a>标签跳转到实际页面的几种方法。

1. <a href="#"></a>

2. <a href="#none"></a>

3. <a href="###"></a>

4. <a href="javascript:"></a>

5. <a href="javascript:;"></a>

6. <a href="javascript:void(0)"></a>

7. <a href="javascript :void(0);"></a>

 

第1种，点击这个连接后，会让页面跳到页面顶部，在location.href后面增长#号。

第2种，点击这个连接后， 若是页面里面有id为none的元素，会执行锚点机制跳转到这个元素上缘。

第3种，不跳转，能够阻止默认的跳转行为，可是这个在后端代码中容易识别成注释，后面的代码不显示，以前遇到过这种坑，以后再没用过。

后面几种使用了javascript伪协议。咱们上面已经对5和7进行了说明，想详细了解void运算符，可前往https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/void查看。

为何我要列出4和6呢，有时候有些同窗会忘记写分号，这样在IE6下面点击a标签，会形成页面中的gif暂停。

 

 

 

本博客文章皆为原创，未尽许可，请勿转载 （http://www.cnblogs.com/song-song/p/5277838.html）