移動端判斷觸屏位置程式碼例項
分享一段程式碼例項,它能夠實現判斷移動端觸屏位置的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/> <meta name="format-detection" content="telephone=no" /> <title>螞蟻部落</title> <style type="text/css"> div{ margin:20px 0; font-size: 18px; } #container{ width:100%; height:420px; background-color: #1AC78C; } </style> </head> <body> <div> <h3>觸控開始</h3> <p>觸控方向為:<span id="direction"></span></p> </div> <div id="container"></div> <script type="text/javascript"> var container = document.getElementById("container"); var direction = document.getElementById("direction"); var start_x; var start_y; var end_x; var end_y; container.addEventListener("touchstart", function(event) { if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; start_x = touch.pageX; start_y = touch.pageY; }; }); container.addEventListener("touchmove", function(event) { event.preventDefault(); if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; move_x = touch.pageX; move_y = touch.pageY; }; }); container.addEventListener("touchend", function(event) { if (event.changedTouches.length == 1) { var touch = event.changedTouches[0]; end_x = touch.pageX; end_y = touch.pageY; }; var directionMsg = ""; var numRange = 20; if (start_x - end_x > numRange) { directionMsg += "左"; } else if (start_x - end_x < -numRange) { directionMsg += "右"; } if (start_y - end_y > numRange) { directionMsg += "上"; } else if (start_y - end_y < -numRange) { directionMsg += "下"; } direction.innerHTML = directionMsg; }); </script> </body> </html>
特別說明:需要在移動端,或者模擬移動端環境下測試,否則無效果。
相關文章
- React 移動端判斷使用者劃屏方向React
- 移動端的判斷
- 判斷在移動端還是PC開啟
- vue移動端路由切換完整例項Vue路由
- nginx 判斷移動端或者 PC 端 進入不同專案Nginx
- js判斷是否移動端及瀏覽器核心JS瀏覽器
- vue:移動端判斷鍵盤事件,相容安卓iosVue事件安卓iOS
- JavaScript運動框架程式碼例項JavaScript框架
- H5觸控事件判斷滑動方向H5事件
- ASP.NET CORE中判斷是否移動端開啟網頁ASP.NET網頁
- PHP+Ajax手機移動端發紅包例項PHP
- CRC 自動判斷大端 小端
- 美化滾動條效果程式碼例項
- JavaScript判斷手機、平板電腦客戶端程式碼JavaScript客戶端
- 如何判斷頁面是pc端還是移動端,進入不同的頁面
- css3晃動效果程式碼例項CSSS3
- SVG拖動繪製矩形程式碼例項SVG
- 3.1.5.9 啟動遠端例項
- 移動端首屏優化策略優化
- PHP判斷是手機移動端訪問還是PC端訪問的函式PHP函式
- PHP透過session判斷防止表單重複提交例項PHPSession
- js程式碼判斷瀏覽器JS瀏覽器
- dom操作程式碼例項
- css梯形程式碼例項CSS
- led驅動程式例項
- CSS3星系運動效果程式碼例項CSSS3
- 移動端質量框架圖例框架
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- table表格美化程式碼例項
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- Switchquery:移動端秒級配置觸達平臺
- 移動端Echarts橫屏進入退出效果Echarts
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- SQL觸發器例項講解SQL觸發器
- php下利用curl判斷遠端檔案是否存在的實現程式碼PHP
- 下拉選項,一個小判斷
- canvas刮刮樂程式碼例項Canvas