日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

前端click事件及自定义事件

發布時間：2023/12/20 HTML 32 豆豆
生活随笔 收集整理的這篇文章主要介紹了 前端click事件及自定义事件 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

響應式頁面開發

常見的前端響應式開發有3套相應的解決方案：
  • bootstrap 的 columns 布局
    ： 2. 使用全局的rem （頁面所有元素的寬高和字體都用rem等比縮放）
    • 使用阿里的flex box ，這種方法和第二種類似。不同點是，頁面的字體用的是px

    前端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) 的支持。也就是說現在前端不需要考慮這個延時了。

    /// 這個在chrome生效，safari不生效 <meta name="viewport" content="initial-scale=1.0">/// 也可以設置css，這個chrome和safari都生效 html{touch-action:manipulation; }

    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，我們就可以認為發生了搖一搖事件

    <!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>搖一搖實現</title> </head> <style>#gravity{height: 100vh;} </style> <body><div id="gravity"></div><script>const EMPTY_VALUE = 100;const THREAD_HOLD = 13.8;let minX = EMPTY_VALUE;let minY = EMPTY_VALUE;window.ondevicemotion = function(event){let gravity = event.accelerationIncludingGravity;console.dir(gravity)let x = gravity.x;let y = gravity.y;if(x < minX)minX = x;if(y < minY)minY = x;if(Math.abs(x - minX)> THREAD_HOLD && Math.abs(y-minY)>THREAD_HOLD){console.log("shake")let event = new CustomEvent("shake")window.dispatchEvent(event)minX = minY = EMPTY_VALUE;}}window.addEventListener("shake",function(){let div = document.createElement("div")div.innerHTML = "window shake callback was called"document.getElementById('gravity').appendChild(div)})</script> </body> </html>

    總結

    以上是生活随笔為你收集整理的前端click事件及自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。