小知识点
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事件触发。