1.隔离click事件
有一些应用，不需要我们自己的定义的click函数，例如：
$(document).on('click', '#inp', function(e){
alert('hello world!');
});
希望点击id="inp"时，不予以响应，那怎么办！！看代码：
document.addEventListener('click',touch, true);
function touch (event){
switch(event.type){
case "click":
event.preventDefault();
event.stopPropagation();
}
break;
}
2.计算窗口的大小
获取窗口的可视区域大小：
var w = document.documentElement.clientWidth || document.body.clientWidth //clientWidth是对象看到的宽度,不包含边界(border).若包含为offsetWidth
//如果窗口包含内容超出了窗口可视区域，那么应该使用scrollWidth和scrollHeight属性。
标准做法 html头
<!DOCTYPE html>
var a=document.documentElement.scrollTop || document.body.scrollTop; //获取垂直滚动条从top到滚动的高度
var b=document.documentElement.clientHeight; //可见高度
var c=document.body.offsetHeight; //body+其内边距+滚动条+边框
3.获取手指滑动的长度
var hasTouch = 'ontouchstart' in window && !isTouchPad,
_start:function(e){
var point = hasTouch ? e.touches[0] : e;
startY = point.pageY;//chrome,ff,opera pageY相对整个页面的坐标
}
_move:function(e){
var point = hasTouch ? e.touches[0] : e;
//offsetY就是手指滑动的垂直距离
offsetY = point.pageY - startY;
}
通过offsetY>0表示手指下拉，offsetY<0表示手指上拉，页面放在微信上时，如果你向上滑动或者向下滑动屏幕时，会发现一些微信的特征，其代码如下：
var f;
n.addEventListener("touchstart", function(e) { //n为h5页面的body
f = e.touches[0].clientY
},!1),
n.addEventListener("touchmove", function(t) {
var i = "11"
, n = this;
if (0 === n.scrollTop) //滚动条最顶部的情况。
// 如果说没有滚动条的情况，i = "00"; 有滚动条的情况为“01”,scrollHeight是客户端高度+滚动条高度
i = n.offsetHeight === n.scrollHeight ? "00" : "01";
else if (n.scrollTop + n.offsetHeight >= n.scrollHeight)//有滚动条，滚动到最底部的情况。
i = "10";
if ("11" !== i) {
//01是向上滑动或者滑不动，10是向下滑动。
var r = t.touches[0].clientY - f > 0 ? "10" : "01";
if (!(parseInt(i, 2) & parseInt(r, 2)))
//e(t)
t.stopPropagation();
t.preventDefault(); }
},!1);
4.addEventListener进一步了解
<body>
<button id="loading" a="xx"></button>
<script type="text/javascript">
var eventObj = {
a:'hello world!',
handleEvent:function () {
alert(this.a);
}
}
document.getElementById('loading').addEventListener('click',eventObj);
</script>
</body>
一般addEventListener第二个参数为一个函数，也可以为一个对象，不过对象必须有handleEvent这个成员，才能触发事件，触发的也是handleEvent函数，否则就不能触发。
5.给IOS系统的微信页面赋Title
function setIOStitle(title) {
$body = $('body');
document.title = title;
var $iframe = $('<iframe src="/assets/img/settitle.png"></iframe>').on('load', function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0)
}).appendTo($body);
}
6.获取到当前页面的活动元素
获取一个input元素获取到焦点，可以通关下列代码来获取：
var el = document.activeElement;
if (el.nodeName.toLowerCase() == 'input'）{
}//如果去掉void，则x=C;
7.zepto对checkbox的cheked操作无效，需要使用原生态dom进行操作。
$("#dom").attr("checked",true) //无效
document.queryselect("#dom").checked = true //有效,在IOS上这个checked回失效
8.对URL的处理方式（seajs）
8.1 dir和cwd赋值
//获取页面引用JS的路径
function getScriptAbsoluteSrc(node) {
return node.hasAttribute ? // non-IE6/7
node.src :
// see http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
node.getAttribute("src", 4)
}
//"js/user/account.js?t=20170815"
var loaderScript = doc.getElementById("seajsnode") || scripts[scripts.length - 1];
//cwd为dirname(doc.URL);
//有三种情况，第一获取id="seajsnode"节点的src来获取加载路径，第二获取最后一个脚本节点的src，最后才是URL。
//loaderDir有二个类别值，绝对路径和相对路径。
var loaderDir = dirname(getScriptAbsoluteSrc(loaderScript) || cwd);
// The loader directory，初始时给data对象的两个成员赋值。
data.dir = loaderDir；
// The current working directory
data.cwd = cwd
8.2 base赋值
var BASE_RE = /^(.+?\/)(\?\?)?(seajs\/)+/ // The root path to use for id2uri parsing
// If loaderUri is `http://test.com/libs/seajs/[??]
//[seajs/1.2.3/]sea.js`, the baseUri should be
//http://test.com/libs/`
data.base = (loaderDir.match(BASE_RE) || ["", loaderDir])[1]
//有两种合理性，一是loadDir匹配到了BASE_RE,类似于xx/yy/??seajs/
//那么data.base = xx/yy/,否则为loaderDir，我们一般也是用到
//data.base为loaderDir
9.元标签
<meta name="viewport" width="device-width">
把视口的的css像素设置为物理像素。如果是在视网膜屏的话，会发现图片都会放大了。
10. button 标签有disabled, button不会有click事件触发。