[HTML5]移動端前端常見的觸控相關事件touch、tab、swipe等
//螢幕解析度
var scheight= window.screen.height;
var scwidth = window.screen.width ;
//螢幕可用工作區高度
var scavheight= window.screen.availHeight ;
var scavwidth = window.screen.availWidth ;
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("qqq");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].screenX + "," + event.touches[0].screenY + ") =====scavheight("+scavheight+"),scavheight("+scavwidth+")++++scheight("+scheight+"),scheight("+scwidth+")";
break;
case "touchend":
oInp.innerHTML = "<br/>Touch end (" + event.changedTouches[0].screenX + "," + event.changedTouches[0].screenY + ")=====scavheight("+scavheight+"),scavheight("+scavwidth+")++++scheight("+scheight+"),scheight("+scwidth+")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "<br/>Touch moved (" + event.touches[0].screenX + "," + event.touches[0].screenY + ")=====scavheight("+scavheight+"),scavheight("+scavwidth+")++++scheight("+scheight+"),scheight("+scwidth+")";
break;
}
}
}
window.addEventListener('load',load, false);
相關推薦
[HTML5]移動端前端常見的觸控相關事件touch、tab、swipe等
function load (){ //螢幕解析度 var scheight= window.screen.height; var scwidth = window.screen.width ; //螢幕可用工作區高度 var scavheight=
html5移動端：手機觸控gesturestart（js）
<!doctype html> <html> <head><title>Mobile Cookbook</title><meta charset="utf-8"><meta name="vie
HTML5移動端觸控事件
一、移動端事件問題 1.click事件300ms延遲問題 2007年第一代iphone釋出，移動端Safari首創雙擊縮放功能，原理是click一次後，經過300ms之後檢測是否再有一次click，如果有就會縮放，如果沒有則是一個click事件。所以cilck操作會有卡頓感覺。 2.dblclick事件
Html5 移動端 觸摸滑動事件
next() star jquer meta scrip char XML func mage 以下代碼經過測試 沒有問題 且可以循環滑動 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xh
HTML5 移動端 手指事件
手指事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta
HTML5移動端通過touch事件判斷手勢方向及頁面到達底部
startClientY:0,//螢幕開始滑動位置 endClientY:0,//螢幕結束滑動位置 movedirection:'CENTER',//滑動方向 lastscrolltop:0,//上
html5移動端：元素拖動/觸控touch（js）(jquery)
一、html5移動端：元素拖動（js） <!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=dev
html5移動端手勢事件
第1章 事件參照表 事件 描述 on-hold 長按事，長按的時間是500毫秒 on-tap 輕擊，如果長按事件超過250毫秒，那就不是輕擊了 on-double-tap 雙擊 on-touch
關於<meta>的各種用處以及移動端的常見問題
字母自動大寫 mpat 自動 col code log spa capi flex 1.優先使用最新版本的IE和Chrome <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 2
移動端前端適配方案20170707
and rect() keyword 不同 響應 屏幕 win rect class 1.Meida Queries meida queries 的方式可以說是我早期采用的布局方式，它主要是通過查詢設備的寬度來執行不同的 css 代碼，最終達到界面的配置。核心語法是： @m
h5移動端阻止瀏覽器長按事件
-1 ext clas move 事件 his 設置 urn log 移動端長按圖片或者元素的時候會出現默認的瀏覽器事件，這樣會影響自定義的長按行為，很麻煩。微信的圖片和元素的長按事件效果如下 找到了一個方式去掉首先要把圖片放到div的背景圖片中（用圖片試了不行，如果有大
移動端開發常見的坑
filters navigator oar com [] 註意 amp use node 一、移動端開發通用坑 1、click300ms延遲？ 講道理，現在開發移動端基本是不會有這麽一個問題的。但作為移動端以前的經典坑，我這裏也拿出來說上一說吧。移動設備上的web網頁是
HTML5移動端最新兼容問題解決方案
otl call area cat dev doctype 橫屏 ont black 1、安卓瀏覽器看背景圖片，有些設備會模糊。用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麽呢？經過研究，是devicePixelRatio作怪，因為手機分辨率太小，如果按照分
移動端APP列表點透事件處理方法
lun 彈窗 效果 tee 兩張 mark turn 方案 nod 關於點透事件這裏不再贅述，如果不清楚的可以上網搜一搜，或者看小火柴的這篇文章。 這裏是自己在做移動端時，在列表滑動的時候，遇到的點透問題。出現這個問題的來由是因為在轉場的時候，各個手機的轉場效果不一樣，有的
移動端一些常見的默認樣式問題
才有 solid chrome color css out 拖拽 元素縮放 rom 1.ios按鈕變灰色,給按鈕加樣式: -webkit-appearance: none; 2.有圓角 button{ border-radius: 0; } 3.去除Chrome等瀏覽器文本
初探JS-html5移動端發送指定內容短信到指定號碼
鏈接 nav navigator 屬性 ava inpu params document san 原理：利用a標簽跳轉指定網址： sms://[號碼]?body=[內容] //安卓 sms://[號碼]&body=[內容] //IOS 首先
29.html5 移動端開發總結
手機 kit you 技巧 運動 dev 方式 include andro 手機與瀏覽器 瀏覽器: 移動端開發主要針對手機，ipad等移動設備，隨著地鐵裏的低頭族越來越多，移動端開發在前端的開發任務中站的比重也越來越大。各種品牌及尺寸的手機也不盡相同。尺寸不同就算了分辨率，
HTML5——移動端的點擊、拖拽
不支持 瀏覽器 cnblogs log www http 事件 blog .cn 移動端瀏覽器不支持mouse事件 https://www.cnblogs.com/joyco773/p/6519668.html https://www.cnblogs.com/yjhua/p
移動端長按禁止預設事件總結
1、如果是禁用長按選擇文字功能，用 css : 全域性* 或者 區域性選擇相映的DOM加 * { -webkit-touch-callout:none; -webkit-user-select:none;
移動端h5模擬長按事件
為啥寫這篇文章 最近接了個需求，要求長按某個標籤顯示刪除一個懸浮的刪除按鈕。這個需求其實在app上很常見，但是在移動端h5中，我們沒有長按的事件，所以就需要自己模擬這個事件了。 大概效果如下： ps: 為了做個gif還下了app，還得通過郵件發到電腦上，腦瓜疼。。 思路 放棄c