var head = document.getElementsByTagName('head')[0] || document.body; function loadJsModule(url) { var script = document.createElement('script'); script.charset = 'utf-8'; script.type = 'text/javascript'; script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { /* * 加载逻辑, callback为define的回调函数, args为全部依赖模块的数组 * callback.apply(window, args); */ script.onload = script.onreadystatechange = null; } }; }
fastclick是将事件绑定到你传的元素(通常是document.body) ② 在touchstart和touchend后(会手动获取当前点击el),若是是类click事件便手动触发了dom元素的click事件 因此click事件在touchend便被触发,整个响应速度就起来了,触发实际与zepto tap同样 既然浏览器有这300ms的延迟,那么咱们来代替浏览器判断,手动触发click事件,这也是fastClick的解决方案。 // 自定义事件 var eve = new Event('自定义事件名'); el.addEventListener('自定义事件名', function(){ console.log('自定义事件') }); el.dispatchEvent(eve); // fastClick的核心代码 FastClick.prototype.onTouchEnd = function(event){ // 一些状态监测代码 // 从这里开始, if (!this.needsClick(targetElement)) { // 若是这不是一个须要使用原生click的元素,则屏蔽原生事件,避免触发两次click event.preventDefault(); // 触发一次模拟的click this.sendClick(targetElement, event); } } 这里能够看到,FastClick在touchEnd的时候,在符合条件的状况下,主动触发了click事件,这样避免了浏览器默认的300毫秒等待判断。为了防止原生的click被触发,这里还经过event.preventDefault()屏蔽了原生的click事件。 咱们来看看他是怎么模拟click事件的 FastClick.prototype.sendClick = function(targetElement, event) { // 这里是一些状态检查逻辑 // 建立一个鼠标事件 clickEvent = document.createEvent('MouseEvents'); // 初始化鼠标事件为click事件 clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); // fastclick的内部变量,用来识别click事件是原生仍是模拟 clickEvent.forwardedTouchEvent = true; // 在目标元素上触发该鼠标事件, targetElement.dispatchEvent(clickEvent); 咱们在网上搜索fastClick,大部分都在说他解决了zepto的点击穿透问题,他是怎么解决的呢?就是上面最后一句,他模拟的click事件是在touchEnd获取的真实元素上触发的,而不是经过坐标计算出来的元素。
【当margin/padding取形式为百分比
的值时,不管是left/right,仍是top/bottom
,都是以父元素的width
为参照物的!】javascript