前端click事件及自定义事件
響應式頁面開發
常見的前端響應式開發有3套相應的解決方案：： 2. 使用全局的rem （頁面所有元素的寬高和字體都用rem等比縮放）
前端click事件及自定義事件
前端click事件在移動端會比較遲鈍，但是touchstart會造成誤觸發
谷歌開發文檔中可以找到答案：For many years, mobile browers applied a 300-350ms delay between touchend and click while they waited to see if this was going to be a double-tap or not, since double-tap was a gesture to zoom into text.
因為移動端要判斷是否是雙擊所以才推遲300-350ms才觸發click
chrome 32 版已經把這個延遲去掉了，如果有一個如下的標簽
<meta name="viewport" content="width=device-width">
即把viewport 設置成設備的實際像素，那么就不會有這個延時。并且這個舉動受到了IE/Firefox/Safari(iOS9.3) 的支持。也就是說現在前端不需要考慮這個延時了。
click/ touch 觸發順序
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{height: 100vh;}</style> </head> <body><script>;(function(){let target = document.body;console.log(target)let touchstartTime = 0;function log(event){if(event.type ==="touchstart") touchstartTime = Date.now();console.log(event.type,Date.now()-touchstartTime)}target.onclick = logtarget.ontouchstart = logtarget.ontouchend = logtarget.ontouchmove = logtarget.onmouseover = logtarget.onmousedown = logtarget.onmouseup = log})()</script> </body> </html>去掉viewport和沒去viewport是兩個不同的結果，可以自己試一下
tap事件的實現
zepto 的tap是一個沒有延時的click是在touchend之后生成的一個click事件，并觸發click再取消原來的click。touchend之后不能每次都觸發tap，因為有的用戶不是在單擊而是滑動。zepto使用的是位移偏差大于30，并且時間差小于700ms
// 手動實現一個tap事件 // tap let $ = function(selector){let dom = null ;if(typeof selector === "string"){dom = document.querySelectorAll(selector)}else if (selector instanceof HTMLElement){document = selector;}return new $Element(dom)}class $Element{constructor(_doms){let doms = _doms.constructor === Array ||_doms.constructor === NodeList ? _doms : [_doms]this.doms = doms;this.init()for(let i =0; i<doms.length;i++){this[i] = doms[i]if(!doms[i].listeners){doms[i].listeners = {}}}}init(){for(let i=0;i<doms.length;i++){if(!this.doms[i].listeners){this.initTapEvent(this.doms[i])}}}on(enentType,cb){for(let i=0;i<doms.length;i++){let dom = this.doms[i]if(!doms.listeners[eventType]){doms.listeners[eventType] = []}dom.listeners[eventType].push(cb)}}trigger(eventType,event){for(let i=0;i<doms.length;i++){$Element.dispatchEvent(this.doms[i],eventType,event)}}static dispatchEvent(dom,eventType,event){let listeners = dom.listeners[eventType];if(listeners){for(let i =0;i<listeners.length;i++){listeners[i].call(dom,event)}}}}搖一搖事件
html5 新增一個devicemotion的事件，可以使用手機的重力感應
window.ondevicemotion = function(event){let gravity = event.accelerationIncludingGravity;console.log(gravity.x,gravity.y,gravity.z) // x，y，z 三個方向的加速度 }devicemotion事件會不斷觸發，而且觸發的很快x軸和y軸的變化區間是-45 到 +45度，即這個區間就是
delta = 9.8 * sin(45) * 2 = 13.8
只要x軸和y軸的g值變化超過13.8，我們就可以認為發生了搖一搖事件
總結
以上是生活随笔為你收集整理的前端click事件及自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Sqlserver 日期查询处理
- 下一篇： 计算机视觉的sci文章,SCI(图像-计