1.隔离click事件
有一些应用，不需要我们自己的定义的click函数，例如：
1 $(document).on('click', '#inp', function(e){ 2 alert('hello world!'); 3 });
希望点击id="inp"时，不予以响应，那怎么办！！看代码：
document.addEventListener('click',touch, true);
function touch (event){
switch(event.type){
case "click":
event.preventDefault();
event.stopPropagation();
}
break;
}
获取窗口的可视区域大小：
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事件触发。