js 代码规范

Google JavaScript 编码规范指南: Google JavaScript 编码规范指南

不常用的css样式

记得以前遇到在chrome下的中文版本,字体无法应用小于12px的css样式,今天终于看到了解决方法。

@linxz428(林小志__linxz) 在中文版的chrome里,定义了小于12px的字体依然显示为12px.
解决办法:webkit的私有属性 html{-webkit-text-size-adjust:none;}

离完美又进了一步。

IE6下链接onclick事件处理中的请求被aborted

一大早发现,ie6下点发起对话没法弹出窗口,ff浏览器就是可以的。开启HttpWatch检测,发现点击的被aborted。

查找资料显示aborted的原因如下。

The (Aborted) value is more complex in its origin. It occurs when IE has started to process the request for a URL (e.g. to download an image), but then decides to cancel the operation. Here are some examples of when this can occur:

  1. If you click on a link or bookmark while a page is downloading, or click on IE’s Stop button, you will see that IE cancels any requests which are still active and HttpWatch shows the (Aborted) result.
  2. A CSS rollover image on a page will start a request when the mouse pointer is moved into its active area. If the mouse pointer quickly moves away again, IE may abort the request if it has not already completed.
  3. Sometimes javascript is used to fire off requests for background tasks or to gather statistics on a page. Often this can lead to aborted results if the javascript does not wait for the response to be received from the server.

继续寻找根源,搜索到发现这个问题是ie6中一个底层 机制的bug,之后的版本已经解决了。据说<a href="javascript:void(0)">或者<a href=#">这样使用a标签的话并不能阻止a标签最后触发一个什么行为,导致ie6会错误的认为页面刷新或者重定向了,并且中断了当前所有连 接,这样新的加载就被aborted了。解决方案最简单的方法有两个,一个是这样使用a标签<a href="xxx(); return false;">,另外一个就是用div替换a标签来用。至此,问题总算解决。

在开发中常使用<a>标签代替button,好处在于可以利用a:hover样式做mouseover效果,但下面的代码在IE6下就有问题,onclick中的请求被aborted。
<a href="javascript:void(0);" onclick="$('current').src='images/001.jpg';">切换图片</a>,IE6下图片不显示。
<a href="javascript:void(0);" onclick="MyJrjRelation.checkAttention();">关注此人</a>,IE6下请求失败。

解决方法:
1. 不使用onclick,但必须保证处理函数不返回值,否则浏览器将清空页面,只显示函数的结果。如果checkAttention返回false,浏览器中就会显示false。
<a href="javascript:MyJrjRelation.checkAttention();">关注此人</a>

<a href="javascript:void(MyJrjRelation.checkAttention());">关注此人</a>   void返回undefined;

2. 在onclick上加return false阻止浏览器执行href。href属性还是必须的,否则链接就样式失效了。
<a href="javascript:void(0);" onclick="MyJrjRelation.checkAttention();return false;">关注此人</a>

总结来说<a href="javascript:void(0);" onclick="MyJrjRelation.checkAttention();return false;">的兼容性最好。

相关知识链接http://www.cnblogs.com/zhyt1985/archive/2009/05/27/1490755.html,http://weizuqing1986-126-com.javaeye.com/blog/458141,http://blog.csdn.net/wangjj_016/archive/2010/02/10/5304784.aspx

A的href和onclick

今天一同事告诉我说,他写的<a onclick="change_detail_show('name','place')"  href="javascript:;" >点击</a>在tt下无效,在ie和ff能通过。

解决方案是在onclick的函数后面加分号。JavaScript是弱语言类型,对语法检查不是很严格。但是很多浏览器对这个比较较真,有的浏览器就必须看到;才认为你是调用了一个方法。所以严格意义上来说你还是以后都给加上。这样是肯定不会有问题的。

相关知识补充:

今天在做一个点击事件的时候,用的是a标签的href="javascript:XXX(this)"来触发,发现怎么样都出错,很奇怪this居然没有 parentNode,后来试了一下,在XXX()中的第一句写上alert(obj==window),发现居然弹出true,也就是说,用 href="javascript:XXX(this)"来调用XXX()的时候,this指针并不是指向当前DOM对象的,而是指向window。用 onclick="XXX(this)",再试试,发现这次就传对了。

在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的,但是写上去是一个好习惯。 (实现版本 Navigator 3.0)

你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。

下面的代码创建了一个超级链接,当用户以后不会发生任何事。当用户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

<A HREF="javascript:void(0)">单此处什么也不会发生</A>

下面的代码创建了一个超级链接,用户单时会提交表单。

<A HREF="javascript:void(document.form.submit())">
单此处提交表单</A>

下面代码则执行了subgo()函数,

<a href="javascript:void(0)" onclick="subgo()">点我</a>

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。

<a href="#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)

href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写:<a href=" javascript:void(0)" onclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协 议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写onclick="xxx();return false;"

相关知识链接:http://www.adanghome.com/?p=151,http://gocom.primeton.com/blog21307_27051.htm