小知识点
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;
}
获取窗口（dom）的可视区域大小：
var w = document.documentElement.clientWidth || document.body.clientWidth //clientWidth是对象看到的宽度,不包含边界(border),含padding.如果为inline元素，则为0，
// offsetWidth 包含border,和滚动条高度，不含外边距。如果为inline元素，则为0。
// 滚动条有高度和宽度，元素的滚动条处在padding和border之间。综上所述，顺序为：width, padding，滚动条宽度，border,margin。
// 如果窗口包含内容超出了窗口可视区域，那么应该使用scrollWidth和scrollHeight属性。注意：clientWidth + 溢出部分（上溢出和下溢出） = scrollWidth。如果没有滚动条，即：clientWidth = scrollWidth
// 如果没有下溢出部分：scrollTop = scrollHeight - clientHeight。
另外，还有很关键的一对属性：offsetLeft和Left;offsetTop和Top;
涉及到知识点：
1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin，但只在水平方向有效。
4、内联元素可以设置padding，水平方向有效，垂直方向上的padding其实是存在的，但是不占行内的高度。
参考文档：https://blog.csdn.net/i_am_someone/article/details/96572922
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事件触发。
