為網頁加入多點觸控功能(IE10版)

标签: IE HTML5 | 发表时间:2012-11-19 22:51 | 作者:Jeffrey
出处:http://blog.darkthread.net/blogs/darkthreadtw/default.aspx

之前曾以iPad為對象寫過 為網頁加入多點觸控功能範例,如今支援觸控的Windows 8筆電在手,不改寫成IE10版怎能止癢?

經過 簡單研究,大致整理IE10與Safari/Chrome觸控事件差異如下:

  1. 事件名稱不同,IE使用的不是touchstart、touchmove、touchend等名稱,而是 MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut, MSPointerHover... 等。另外,還有高階的手勢事件: MSGestureTap, MSGestureHold, MSGestureStart, MSGestureChange, MSGestureEnd, MSInertiaStart,讓開發者不用自己費心追蹤各指座標變化,就能判定使用者正在縮放、旋轉動作,真是佛心來著,將來肯定要抽空玩一下才不會暴殄天物。
  2. MSPointerDown等事件概念與touchstart也有所差異。在touchstart中會得到touches陣列,包含多個觸控點的資料;MSPointerDown則是個每個觸控點活動都會觸發一次。
  3. 滑鼠也會觸發MSPointer*事件! 如只想對觸控產生反應,可用if (e.pointerType == e.MSPOINTER_TYPE_TOUCH)過濾。
  4. 因為事件觸發基礎不同,原先在touchmove中可以透過changedTouches取得移動中的觸控點,使用IE10則要自行比對座標值該點是否在移動。
  5. 要攔截觸控事件的元素需加上CSS設定: -ms-touch-action: none; 防止跟IE10預設的縮放、移動瀏覽等觸控操作打架。
  6. 檢查navigator.msMaxTouchPoints屬性存在與否可偵測IE是否支援觸控,由navigator.msMaxTouchPoints亦可得到裝置所支援的觸控點數。

把握以上重點,經過簡單修改,支援IE10的多點觸控展示網頁就完成囉~ 線上展示

<!DOCTYPE html>
 
<html>
<head>
    <title>Mutli-Touch Test</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js" 
            type="text/javascript"> </script>   
    <meta name="viewport" 
     content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        html,body {
            /* 停用預設的縮放、移動瀏覽(Panning)等觸控功能, 由自訂程式接管 */
            -ms-touch-action: none;
        }
    </style>
    <script>
        //http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx
        $.extend($.support, { ieTouch: "msMaxTouchPoints" in window.navigator });
        $(function () {
            //檢查是否為支援觸控功能的IE瀏覽器
            if (!$.support.ieTouch) {
                $("body").html("<span>IE on touchable device only!</span>");
                return;
            }
            //使用canvas繪製回應
            var canvas = document.getElementById("sketchpad");
            var ctx = canvas.getContext("2d");
            //宣告變數儲存活動中觸控點的資訊
            var touches = {}, changedTouches = {};
            //傳回仿touchStart事件的touch物件
            function createTouchObject(e) {
                return { identifier: e.pointerId, pageX: e.clientX, pageY: e.clientY };
            }
            canvas.addEventListener("MSPointerDown", function (e) {
                //由於滑鼠也會觸發,先檢查pointerType,只針對觸控做反應
                if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) return;
                var t = createTouchObject(e);
                touches[t.identifier] = t;
            });
            canvas.addEventListener("MSPointerMove", function (e) {
                if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) return;
                var t = createTouchObject(e);
                var origT = touches[t.identifier];
                touches[t.identifier] = t;
                //與前次保存資料比較,偵測點觸控點是否移動
                if (origT &&
                    Math.abs(t.pageX - origT.pageX) + Math.abs(t.pageY - origT.pageY) > 1)
                    changedTouches[t.identifier] = t;
                else
                    delete changedTouches[t.identifier];
            });
            canvas.addEventListener("MSPointerUp", function (e) {
                if (e.pointerType != e.MSPOINTER_TYPE_TOUCH) return;
                var t = createTouchObject(e);
                //停止活動,將觸控點自touches及changedTouches移除
                delete touches[t.identifier];
                delete changedTouches[t.identifier];
            });
            //定義不同顏色用來追蹤多點
            var colors =
                ("red,orange,yellow,green,blue,indigo,purple," +
                "aqua,khaki,darkred,lawngreen,salmon,navy," +
                "deeppink,brown,olive,violet,tomato,gray").split(',');
            //在canvas繪製追蹤點
            ctx.lineWidth = 3;
            ctx.font = "10pt Arial";
            var r = 40;
            function drawPoint(i, x, y, c, id, chg) {
                ctx.beginPath();
                ctx.fillStyle = c;
                //若屬changedTouches則顯示黑框
                ctx.strokeStyle = chg ? "#000" : c;
                ctx.arc(x, y, r, 0, 2 * Math.PI, true);
                ctx.fill();
                ctx.stroke();
                //顯示touch的identifier及其在陣列中的序號
                //touches在上排藍字,chagedTouches在下排紅字
                ctx.fillStyle = chg ? "red" : "blue";
                ctx.fillText(id,
                    x - r, y - r - 25 + (chg ? 15 : 0));
            }
            //清除canvas
            function clearCanvas() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            //利用identifier識別,相同時要保持同一個顏色
            var touchHash = {}, colorIdx = 0;
            function getColor(id) {
                if (touchHash[id] == undefined)
                    touchHash[id] = ++colorIdx % colors.length;
                return colors[touchHash[id]];
            }
            //每秒更新20次,顯示目前的多點觸控資訊
            setInterval(function () {
                clearCanvas();
                //console.log(JSON.stringify(touches));
                for (var i in touches) {
                    var t = touches[i];
                    drawPoint(i, t.pageX, t.pageY, getColor(t.identifier),
                              t.identifier);
                }
                for (var i in changedTouches) {
                    var t = changedTouches[i];
                    drawPoint(i, t.pageX, t.pageY, getColor(t.identifier),
                              t.identifier, true);
                }
            }, 50);
        });
    </script>
</head>
<body style="padding: 0px; margin: 0px;">
<canvas id="sketchpad" width="1366" height="760" style="border: 1px solid gray">
</canvas>
</body>
</html>

實測結果如下: (幸好最多只有10點,不然連腳都要舉起來"觸控"才能完成測試,肯定抽筋)

相关 [功能 ie10] 推荐:

IE10消费者预览版新功能 紧密结合HTML5‎

- - HTML5研究小组
在Windows 8消费者预览版中, 微软内置了IE10消费者预览版,它包括桌面版和Metro版,带来了全新的体验. 今天, 微软在IE开发者博客中完整罗列了IE10的新功能及在之前版本基础上的更新. IE10消费者预览版的新功能包括XMLHttpRequest的跨域资源共享(Cross-Origin Resource Sharing,简称CORS)、Interoperable HTML5 Quirks Mode(互操作性HTML5怪异模式)、一个可以提醒网页浏览器用户某个网页网站要求安装ActiveX控件的Meta 标签等,只有传统的桌面版IE 10上支持网页控件.

為網頁加入多點觸控功能(IE10版)

- - 黑暗執行緒
之前曾以iPad為對象寫過 為網頁加入多點觸控功能範例,如今支援觸控的Windows 8筆電在手,不改寫成IE10版怎能止癢?. 經過 簡單研究,大致整理IE10與Safari/Chrome觸控事件差異如下:. 事件名稱不同,IE使用的不是touchstart、touchmove、touchend等名稱,而是 MSPointerDown,.

IE10和IE11对比,删除和新增的功能

- - IE浏览器中文网站
微软最新发布的Internet Explorer 11 (IE11)包含诸多新功能,比如改进了性能和安全性、页面加载速度更快、支持新的网页标准和WebGL等. 但你是否知道 IE11也删除了某些功能. 下面,就将和大家一起来探讨IE11中删除的所有功能,以及添加的新功能. 闲话少说,让我们来分享特色列表:.

IE10 for Windows 7正式发布

- - 盒子UI
千呼万唤始出来,微软终于在今天发布了正式版的Internet Explorer 10 for Windows 7,这一版本让Windows 7用户等待了好久. 之前IE10一直仅在Windows 8上才可以使用,而在Windows 7中只有预览版提供. 从IE10官方网站的下载地址看到,简体中文版在线安装包数字签名:2013年2月17日,19:47:20(UTC+8).

IE10:一个引擎,两种体验

- leafduo - 果壳网 guokr.com - 果壳网
紧随Windows 8的脚步,在BUILD大会上,微软官方又为我们揭开了IE10的面纱一角. 目前,各大网页浏览器呈现出百家争鸣的激烈竞争局势,微软也不得不加快浏览器更新步伐,继IE9在3月份发布后,微软便着手于IE10的研发. 在Windows 8开发者预览版中,我们发现它就已内置了IE10平台预览第三版.

微软发布IE10 PP3使用指南

- 洞箫 - cnBeta.COM
据国外媒体报道,上周,微软对外发布了Windows 8开发者预览版,同时还为用户带来了一个新版的IE10浏览器,其中包括HTML5、JavaScript和CSS3功能.

评IE10对HTML5的完美支持

- - 脚本爱好者
近期Windows 8的消息充斥着整个网络. 微软将IE10集成在系统中,并且宣称IE10会很好的支持 HTML5. 本文是对IE10支持HTML5的研究报告. 在过去的几年里我们做了一系列测试来评估主要的移动平台对HTML5应用的支持. 直到现在,我们仍旧没有花时间在Windows phones上,主要因为Windows Phone7浏览器太弱根本不值得评估.

IE10浏览器的8大特性

- - IE浏览器中文网站
虽说 IE10 For Windows 7正式版于上周才推出,但是IE10实际开发已久. 在微软正式推出IE9后约1个月, IE10预览版随即被放出. 相较于之前可以说是“蜗牛”的更新速度,这次可说是快多了,从前年3月14日发布IE9 RTM,到去年8月中旬IE10随着 Windows 8的RTM推出,甚至不到1年半就推出新版,突显微软在网络浏览器方面投入的心力.

IE10的技术进化偏好

- - WPDang
导言:距离IE9正式版发布不足一个月,2011年4月微软就在MIX 11大会上公布了IE10的第一个平台预览版本. 时至今日,经过一年半的时间和6个预览版本的迭代更新,特别是从Windows 8的开发者预览版中开始直接内置IE10的第三个预览版也是首个完整版开始,IE10逐渐的走入了普通用户的视野.

微软列举 IE10 十大亮点

- - ITeye资讯频道
微软近日在其官方博客中,列出了IE10的十大亮点:. 快:第三方测试机构New Relic称 IE10和IE9是Windows平台上响应最快的浏览器,IE10渲染页面比Chrome还快8%. 流畅:IE10中的所有图片、视频和文本都实现了硬件加速. 界面简单,以网页内容为中心. Windows一体化:IE10与Windows 8无缝结合,使用起来更高效.