今天遇到一个很奇怪的问题，下面的a标签在桌面浏览器（自测的chrome）下点击能够执行，但是在移动浏览器（自测的魅族MX自带的原生浏览器和UC浏览器）下点击无反应，折腾了一两个小时，还是毫无头绪。

<a href='javascript:void(0);' onclick='send(1);'>send</a>

问过同事，才知道函数后面应该加个 return false, 函数也就正常执行了。到网上查过资料，return false有两个作用

1. 阻止事件冒泡(event.stopPropagation())

2. 阻止默认事件发生(event.preventDefault)

下面的代码尝试过可能就会更明了。点击“确定”返回true，就会跳转到google首页；点击“取消”返回false，将不会跳转。如果禁用脚本，就会跳转到google首页拉

<a href="http://www.google.com/" onclick="return (confirm('Follow this link?'));">Google</a>

---end

最近因为项目需要，写了一个小插件jScroll，就是在固定宽度的容器中实现内容元素的滚动，知道滑动（拖动）的原理后，插件写起来就会非常顺手的。

原理：一个包装元素wrapper，position: relative，一个滑动元素scroller，position:relative|absolute，不过我更倾向于是relative，因absolute在wrapper没在固定高度时会出现内容显示不完全的问题。当scroller滑动（拖动）时，相应地设置scroller的left值，就OK拉。不过兼容性问题还是要花费一些时间解决的。

jScroll插件源码：

(function(){
    jScroll = function(el, options){
        var that = this;
        that.wrapper = $(el);
        that.scroller = that.wrapper.children(":first");
        that.wrapper.css({ overflow: "hidden"});
        that.options = {};
        $.extend(that.options, options || {});
        that._init();
    }
    jScroll.prototype = {
        newX: 0,
        min: 0,
        max: 0,
        ds: null,
        _init: function(){
            var that = this;
            var startX = 0, curX = 0, pos;
            var children = that.scroller.children();
            var scrollerW = 0;
            var start = function(e){
                e = e || window.event;        // 解决IE不兼容问题
                pos = that.scroller.position();
                that.min = that.wrapper.width() - that.scroller.width();
                startX = that._getX(e);
                that.ds.ontouchmove = that.ds.onmousemove = move;
                return false;
            };
            var move = function(e){
                e = e || window.event;
                curX = that._getX(e);
                that.newX = (curX - startX) + pos.left;
                that.scroller.css({ left: that.newX });
                that.ds.ontouchend = document.onmouseup = end;
                return false;
            };
            var end = function(e){
                e = e || window.event;    
                curX = that._getX(e);
                that.newX = (curX - startX) + pos.left;
                if(that.newX > that.max){
                    that.scroller.animate({ left: that.max}, "slow");
                } else if(that.newX < that.min) {
                    that.scroller.animate({ left: that.min}, "slow");
                }
                that.ds.ontouchmove = that.ds.onmousemove = that.ds.ontouchend = document.onmouseup = null;
                return false;
            };
            that.ds = that.scroller.get(0);      // 获取dom元素
            children.each(function(){
                scrollerW += $(this).outerWidth(true);
            });
            that.scroller.width(scrollerW);
            that.ds.onmousedown = that.ds.ontouchstart = start;
        },
        _getX: function(e){
            return (e && e.changedTouches) ? e.changedTouches[0].clientX : e.clientX;
        },
        // 公开方法
        refresh: function(){
            var that = this;
            that._init();
        },
        scrollTo: function(x){
            var that = this;
            that.newX = (x > that.max) ? that.max : (x < that.min) ? that.min : x;
            that.scroller.animate({ left: that.newX}, "slow");
        },
        // index从0开始
        scrollToElement: function(index){
            var that = this;
            var children = that.scroller.children();
            var count = (index < 0) ? 0 : (index >= children.length) ? (children.length - 1) : index;
            that.newX = 0;
            for(var i = 0; i < count; i++){
                that.newX -= children.eq(i).outerWidth(true);
            }
            that.scrollTo(that.newX);
        },
        destroy: function(){
            var that = this;
            that.ds.onmousedown = that.ds.ontouchstart = null;
        }
    }
    window.jScroll = jScroll;
})();

调用方式：

<script type="text/javascript">
(function(){
    var jscorll = new jScroll("#wrapper");
    //jscorll.scrollTo(-100);
    jscorll.scrollToElement(0);
})();
</script>

自测了iphone、android、ie、chrome、firefox，效果还不错。如有不足之处，望指正，谢谢！

PS：没有找到上传附件的按钮，若是哪位需要示例代码的，请把邮箱留下！

---end

先还原问题，假设有两个页面A.htm（简写为A）和B.htm（简写为B），A部分代码如下：

<div><a href="B.html">跳转到B.htm</a></div>
<script type="text/javascript">
alert("小幻想，小幸福！");
</script>

B部分代码如下：

<div><a id="backPrev" href="javascript:history.go(-1);">返回</a></div>

在iphone safari浏览器下，第一次打开A，会弹出alert。点击A中的链接，跳转到B，当点击B中的【返回】按钮，跳转到A，A中的alert就不会弹出，而android下的浏览器，pc的safari、chrome等浏览器都会执行，这就让我陷入了困惑。google后，发现有人也遇到同样的问题，SO(stackoverflow.com)有人给了回答，如

window.onunload = function() {};

或是

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">this prevents back forward cache</iframe>

或是苹果官方的强制去除页面缓存的方法： 如何避免页面（和cookies）在Safari中被缓存 

尝试过都不解决问题。问了几个同事，他们没遇到过这样的问题，也不知所措。问题还要解决，就只得依靠自己了。功夫不负苦心人，经过一番探究，终于想到了一个方法，代码如下，还是很简洁的

$("#backPrev").attr("href","javascript:void(0);").click(function(){
	if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {             
        	window.location.href = window.document.referrer;
	} else { window.history.go("-1"); }
});

这样问题就解决拉。如是大家对 document.referrer 不熟悉，请参考：https://developer.mozilla.org/en/DOM/document.referrer

---end

接触css, javascript有三年多了，今天遇到的问题最令我不可思议，很容易给人一种错觉，那就是js拼成的html结构肯定有问题。

我实现的功能是添加标签，无刷新地添加到标签列表的最后，见下图中第二行，样式明显有问题

我反反复复地检查了chrome console的html结构，都是一样一样的，在IE和FF下我也认真比较过的，还是没有区别。见下图

同样的html结构，同样的style，竟然展现的样式差异很大，一时没了想法，像个无头苍蝇。索性我就把console下的html复制到notepad++进行对比，看出了一点端倪，见下图。左侧为js生成的html，右侧为页面（.aspx）中的html

引起样式差异的原因可能就是左侧缺少换行，我就在每行字符的末尾加了换行符”\n”，这样样式的问题就解决拉

var html = 
[
	"<li id=\"litem_{0}\">\n".format(catId),
		"<div>\n",
			"<span class=\"checkbox\"><input type=\"checkbox\" name=\"cbItem\" value=\"{0}\" /></span>\n".format(catId),
			"<span class=\"name\">{0}</span>\n".format(catName),
			"<span><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.edit({0});\">[编辑]</a><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.delCat({0});\">[删除]</a></span>\n".format(catId),
		"</div>",
		"<div style=\"display:none;\">\n",
			"<span><input type=\"text\" value=\"{0}\"/></span>\n".format(catName),
			"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.setCat({0});\">确定</button></span>\n".format(catId),
			"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.cancel({0});\">取消</button></span>\n".format(catId),
		"</div>\n",
	"</li>\n"
].join("");

经过长时间的思考，解决一个问题，好开心！

---end