pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

Javascript 高級手勢使用介紹_html5教程技巧

Javascript 高級手勢使用介紹_html5教程技巧HTML5中文學(xué)習(xí)網(wǎng),是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網(wǎng)站、HTML5資訊、HTML5應(yīng)用、HTML5游戲、HTML5教程、HT
點評:在IE10中新加入的對高級用戶輸入的識別支持,舉例說明:注冊一個點擊操作,通過一句addEventListener 就能夠知道當(dāng)前用戶的點擊是哪種設(shè)備,是手指的點擊,是鼠標(biāo)的單擊還是觸控筆的點擊(平板設(shè)備都會帶有觸控筆)

  在IE10中新加入的對高級用戶輸入的識別支持,舉例說明:注冊一個點擊操作,通過一句addEventListener 就能夠知道當(dāng)前用戶的點擊是哪種設(shè)備,是手指的點擊,是鼠標(biāo)的單擊還是觸控筆的點擊(平板設(shè)備都會帶有觸控筆)。

 <canvas id="MyCanvas"></canvas>
    <script>
        MyCanvas.addEventListener(
"MSPointerDown", MyBack, false);
        
function MyBack(e) {
            alert(e.pointerType.toString());
        }
    
</script>

 以上這段代碼就是能夠識別出當(dāng)前用戶的點擊是哪種設(shè)備,通過回調(diào)的方法中 e.pointerType 還進行判斷。鼠標(biāo)是4,觸控筆是3,手指是2。至于值為1是何種設(shè)備還有待研究。

還有需要注意的就是 想在javascript中添加對輸入設(shè)備的識別,注冊的方法事件也是有點點區(qū)別。

addEventListener 添加的事件為 MSPointerDown

而在IE10中對于這樣的多種設(shè)備識別中優(yōu)先處理的手指的點擊,前提是不影響功能正常單擊的情況下。然而IE10不僅僅能識別用戶的輸入設(shè)備還支持非常多的高級手勢

以下為IE10高級手勢支持的演示

 

創(chuàng)建手勢對象

在您的網(wǎng)站中處理手勢的第一步是實例化手勢對象。

var myGesture = new MSGesture();

接下來,為該手勢提供一個目標(biāo)元素。瀏覽器將對該元素觸發(fā)手勢事件。同時,該元素還可以確定事件的坐標(biāo)空間。

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

最后,告知手勢對象在手勢識別期間處理哪些指針。

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

注意:請不要忘記您需要使用 –ms-touch-action 來配置元素以防止其執(zhí)行默認觸摸操作(例如,平移和縮放),并為輸入提供指針事件。

處理手勢事件

一旦手勢對象具有有效目標(biāo)并至少添加了一個指針,則其將開始觸發(fā)手勢事件。手勢事件可分為兩種:靜態(tài)手勢(例如,點擊或保持)和動態(tài)手勢(例如,收縮、旋轉(zhuǎn)和輕掃)。

點擊

最基本的手勢識別是點擊。當(dāng)檢測到點擊時,將會在手勢對象的目標(biāo)元素觸發(fā) MSGestureTap 事件。不同于單擊事件,點擊手勢只能在用戶觸摸、按鼠標(biāo)按鈕或使用手寫筆觸控而不移動時觸發(fā)。如果您要區(qū)分用戶點擊元素和拖動元素的操作,這一點通常會顯得十分有用。

長按

長按手勢是指用戶使用一個手指觸摸屏幕,并保持片刻并抬起而不移動的操作。在長按交互期間,MSGestureHold 事件會針對手勢的各種狀態(tài)而多次觸發(fā):

復(fù)制代碼
代碼如下:

element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End signals the end of the gesture.
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}

動態(tài)手勢(收縮、旋轉(zhuǎn)、輕掃和拖動)

動態(tài)手勢(例如,收縮或旋轉(zhuǎn))將以轉(zhuǎn)換的形式報告,這與 CSS 2D 轉(zhuǎn)換頗為類似。動態(tài)手勢可觸發(fā)三種事件:MSGestureStartMSGestureChange(隨著手勢的持續(xù)而重復(fù)觸發(fā))和 MSGestureEnd。每個事件都包含縮放(收縮)、旋轉(zhuǎn)、轉(zhuǎn)換和速度等相關(guān)信息。

由于動態(tài)手勢以轉(zhuǎn)換的形式報告,因此使用包含 CSS 2D 轉(zhuǎn)換的 MSGesture 來操作諸如照片或拼圖等元素將變得十分輕松。例如,您可以通過下列方式啟用縮放、旋轉(zhuǎn)和拖動元素的操作:

復(fù)制代碼
代碼如下:

targetElement.addEventListener("MSGestureChange", manipulateElement);
function manipulateElement(e) {
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture
.rotate(e.rotation * 180 / Math.PI) // Apply Rotation
.scale(e.scale) // Apply Scale
.translate(e.translationX, e.translationY) // Apply Translation
.translate(-e.offsetX, -e.offsetY); // Move the transform origin back
}


縮放和旋轉(zhuǎn)等動態(tài)手勢可支持鼠標(biāo)操作,具體可通過在旋轉(zhuǎn)鼠標(biāo)滾輪的同時分別使用 CTRL 或 SHIFT 修飾鍵來實現(xiàn)。


【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

作為一名前端工程師,寫組件的能力至關(guān)重要。雖然javascript經(jīng)常被人嘲笑是個小玩具,但是在一代代大牛的前仆后繼的努力下,漸漸的也摸索了一套組件的編寫方式。下面我們來談?wù)劊?/div>
call和apply都是改變上下文中的this并立即執(zhí)行這個函數(shù),bind方法可以讓對應(yīng)的函數(shù)想什么時候調(diào)就什么時候調(diào)用,并且可以將參數(shù)在執(zhí)行的時候添加,這是它們的區(qū)別,根據(jù)自己的實際情
JavaScript對象是一種復(fù)合值:它是屬性和已命名值的集合。通過quot;.quot;符號來引用屬性值。當(dāng)屬性值是一個函數(shù)時,稱為方法。,HTML5中國,中國最大的HTML5中文門戶。
JavaScript 只有 function 級的定義域,而無其他很多編程語言中的塊定義域,所以使得你在某一 function 內(nèi)的某語句和循環(huán)體中定義了一個變量,此變量可作用于整個 function 內(nèi),而不僅僅是在
如何寫JavaScript才能逼格更高呢?怎樣才能組織JavaScript才能讓別人一眼看出你不簡單呢?是否很期待別人在看完你的代碼之后感嘆一句“原來還可以這樣寫”呢?下面列出一些在JavaScri
您只要按照這七個步驟操作就會大大提高您的JavaScript項目的質(zhì)量。使用這個工作流程,錯誤將會減少并且將很多處理優(yōu)化,讓用戶擁有一個愉悅的上網(wǎng)瀏覽體驗。 ...,HTML5中國,中國最
主站蜘蛛池模板: 一体化隔油提升设备-餐饮油水分离器-餐厨垃圾处理设备-隔油池-盐城金球环保产业发展有限公司 | GAST/BRIWATEC/CINCINNATI/KARL-KLEIN/ZIEHL-ABEGG风机|亚喜科技 | 安全光栅|射频导纳物位开关|音叉料位计|雷达液位计|两级跑偏开关|双向拉绳开关-山东卓信机械有限公司 | 预制直埋蒸汽保温管-直埋管道-聚氨酯发泡保温管厂家 - 唐山市吉祥保温工贸有限公司 | 升降炉_真空气氛炉_管式电阻炉厂家-山东中辰电炉有限公司 | ALC墙板_ALC轻质隔墙板_隔音防火墙板_轻质隔墙材料-湖北博悦佳 | 股票入门基础知识_股票知识_股票投资大师_格雷厄姆网 | 河南空气能热水器-洛阳空气能采暖-洛阳太阳能热水工程-洛阳润达高科空气能商行 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 无缝方管|无缝矩形管|无缝方矩管|无锡方管厂家 | 蓝米云-专注于高性价比香港/美国VPS云服务器及海外公益型免费虚拟主机 | 热风机_工业热风机生产厂家上海冠顶公司提供专业热风机图片价格实惠 | 浇注料-高铝砖耐火砖-郑州凯瑞得窑炉耐火材料有限公司 | 国产液相色谱仪-超高效液相色谱仪厂家-上海伍丰科学仪器有限公司 | 实战IT培训机构_IT培训班选大学生IT技术培训中心_中公优就业 | 杭州公司变更法人-代理记账收费价格-公司注销代办_杭州福道财务管理咨询有限公司 | 合肥仿石砖_合肥pc砖厂家_合肥PC仿石砖_安徽旭坤建材有限公司 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | FAG轴承,苏州FAG轴承,德国FAG轴承-恩梯必传动设备(苏州)有限公司 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 海外仓系统|国际货代系统|退货换标系统|WMS仓储系统|海豚云 | 氟塑料磁力泵-不锈钢离心泵-耐腐蚀化工泵厂家「皖金泵阀」 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 伊卡洛斯软装首页-电动窗帘,别墅窗帘,定制窗帘,江浙沪1000+别墅窗帘案例 | 苏州同创电子有限公司 - 四探针测试仪源头厂家 | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 石英砂矿石色选机_履带辣椒色选机_X光异物检测机-合肥幼狮光电科技 | 长信科技产业园官网_西安厂房_陕西标准工业厂房 | 大学食堂装修设计_公司餐厅效果图_工厂食堂改造_迈普装饰 | 不锈钢水箱厂家,不锈钢保温水箱-山东桑特供水设备 | IHDW_TOSOKU_NEMICON_EHDW系列电子手轮,HC1系列电子手轮-上海莆林电子设备有限公司 | 郑州墨香品牌设计公司|品牌全案VI设计公司 | 上海APP开发-APP制作-APP定制开发-上海APP开发制作公司-咏熠科技 | CCE素质教育博览会 | CCE素博会 | 教育展 | 美育展 | 科教展 | 素质教育展 | 减速机三参数组合探头|TSM803|壁挂式氧化锆分析仪探头-安徽鹏宸电气有限公司 | 特种电缆厂家-硅橡胶耐高温电缆-耐低温补偿导线-安徽万邦特种电缆有限公司 | 一级建造师培训_一建培训机构_中建云筑建造师培训网校 | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 厂厂乐-汇聚海量采购信息的B2B微营销平台-厂厂乐官网 |