none
为什么将网页套入exe中网页的轻扫等手势失效? RRS feed

  • 问题

  • 为什么将网页套入exe中网页的轻扫等手势失效?

    我写了一个测试页面,在里面实现了网页的手势,如轻扫,hold等手势。用IE11打开该测试页面手势都正常。

    但是我把这个页面用c++写得Web Browser控件形式去打开手势测试页面,手势竟然都无效?请求高手解决啊!

    手势测试页面代码如下:

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Gesture Event Firing test</title>
    <style type="text/css">
    .display
    {
      /* Block areas from being selected */
      -ms-user-select: none;
     }
     body
     {
       /* Block area from manipulation actions (zoom, pan) */
    
      touch-action: none;
     }
    
    </style>
    
    <script type="text/javascript">
    //	-ms-touch-action:manipulation double-tap-zoom;
    	var messageId = 0;
    	var redGesture, blueGesture;
    	var redElement, blueElement;
    
    	function printMessage(str) {
    		var element = document.getElementById("output");
    		messageId++;
    		element.value += formatMessage(messageId + ":", 4) + str;
    		element.scrollTop = element.scrollHeight;
    
    		element = document.getElementById("eventCount");
    		element.innerHTML = messageId;
    	}
    
    	function formatMessage(str, len) {
    		var formattedMessage = null;
    		if (str != null) {
    			var formattedMessage = str.toString();
    			formattedMessage += " ";
    			for (var idx = formattedMessage.length; idx < len; idx++) {
    				formattedMessage += " ";
    			}
    		}
    		return formattedMessage;
    	}
    
    	function onLoad() {
    
    		//  Create gesture event listeners for each <div> element
    		prepareTarget("Red", redListener);
    		prepareTarget("Blue", blueListener);
    		// Create MSGesture object 1 (red <div>)
    		redGesture = new MSGesture();
    		redElement = document.getElementById("Red");
    		redGesture.target = redElement;
    		// Create MSGesture object 2 (blue <div>)
    		blueGesture = new MSGesture();
    		blueElement = document.getElementById("Blue");
    		blueGesture.target = blueElement;
    
    		redElement.addEventListener("MSGestureChange", handlegesture);
    		blueElement.addEventListener("MSGestureChange", handlegesture);
    	}
    
    	function handlegesture(e) {
    		if (e.velocityX > 1.5)	//通过滑动速度判断swipe 
    		{
    			alert('swipright');
    		}
    		if (e.velocityX < -1.5)
    		{
    			alert('swipleft');
    		}
    		   
    		if (e.scale > 1)	//直接通过scale信息判断pinch  
    		{
    			alert('pinchout');
    		}
    		else if (e.scale < 1)
    		{
    			alert('pinchin');
    		}
    	}
    
    	//  Add gesture events to an element and point at a specific function
    	function prepareTarget(targetId, eventListener) {
    		var target = document.getElementById(targetId);
    		target.addEventListener("MSGestureStart", eventListener, true);
    		target.addEventListener("MSGestureEnd", eventListener, true);
    		target.addEventListener("MSGestureChange", eventListener, true);
    		target.addEventListener("MSInertiaStart", eventListener, true);
    		target.addEventListener("MSGestureTap", eventListener, true);
    		target.addEventListener("MSGestureHold", eventListener, true);
    		target.addEventListener("pointerdown", eventListener, true);
    	}
    
    	function printEvent(evt) {
    		var str =
    			formatMessage(evt.type, 16) +
    			formatMessage(evt.screenX, 6) +
    			formatMessage(evt.screenY, 6) +
    			formatMessage(evt.clientX.toFixed(0), 6) +
    			formatMessage(evt.clientY.toFixed(0), 6) +
    			formatMessage(evt.translationX.toFixed(2), 8) +
    			formatMessage(evt.translationY.toFixed(2), 8) +
    			formatMessage(evt.scale.toFixed(2), 7) +
    			formatMessage(evt.rotation.toFixed(2), 7) +
    			formatMessage(evt.detail, 5) +
    			formatMessage(evt.currentTarget.id, 10) +
    			formatMessage(evt.srcElement.id, 10) +
    			"\n";
    		printMessage(str);
    		evt.stopPropagation();
    	}
    
    	//  Reset the gesture object
    	function reset() {
    		printMessage("Reset gesture\n");
    		redGesture.reset();
    		blueGesture.reset();
    	}
    	//  Adds a pointer to the MSGesture object for the red square
    	function redListener(evt) {
    		if (evt.type == "pointerdown") {
    			redGesture.addPointer(evt.pointerId);
    			return;
    		}
    		printEvent(evt);
    	}
    	//  Adds a pointer to the MSGesture object for the blue square
    	function blueListener(evt) {
    		if (evt.type == "pointerdown")  // add pointer on pointerdown event
    		{
    			blueGesture.addPointer(evt.pointerId);
    			return;
    		}
    		printEvent(evt);  //  Otherwise pass on event
    	}
    
    	function clearMessages(evt)
    		// Clear the list of gesture messages
    	{
    		var results = document.getElementById("output");
    		results.innerHTML = "";
    		messageId = 0;
    		results = document.getElementById("eventCount");
    		results.innerHTML = messageId;
    	}
    </script>
    </head>
    
    <body id = "page" onload="onLoad()">
        <!-- Elements to try out gestures -->
        <div class= "display" id="Red" style="; top: 0px; left: 0px; width: 300px; height: 250px; background-color: red"></div>
        <div class= "display" id="Blue" style="; top: 10px; left: 350px; width: 300px; height: 250px; background-color: blue"></div>
        <div class= "display" id="control" style="; top: 50px; left: 750px; width: 300px; height: 250px;">
            <button onclick=clearMessages()>Clear Messages</button>
            <br />
            <p>Gesture Event Count: <span id="eventCount"></span></p>
        </div>
    
        <strong><pre><font size="2" face="Courier">
            Type            ScrX  ScrY  CliX  CliY  TrnX    TrnY    Scal   Rotn   Det  Current  Source 
        <textarea id=output rows="18" cols="140" wrap="off" readonly="readonly" ></textarea>
        </font></pre></strong>
    </body>
    </html>
    

    页面效果图:


    环境:

    surface Pro平板电脑。win8.1操作系统,IE11浏览器,vs2012开发软件,C++开发语言

    2014年3月3日 8:28

答案

全部回复

  • 你好,

    根据你的描述,当你用web browser控件打开页面的时候,轻扫手势失效。但是当你用IE11打开的时候,没有任何问题。由此,我觉得有可能是web browser 控件产生了内存泄漏。这个只是我的猜测,因为我没有平板电脑为你重现问题。

    从这个相似的帖子我们可以发现,windows store apps 程序的默认内存是150M,如果超过这个值,程序会冻结。但是因为你的程序在用IE11测试的时候,没有出现问题,所以可能问题点在web browser control方面。当然,你也可以参考  Analyze memory usage (JavaScript) 去分析一下内存使用情况。

    你也可以用VMMap 去观察一下内存消耗情况,看一下是否web browser 控件或其他相关内容有内存泄漏问题。可以从 http://technet.microsoft.com/en-us/sysinternals/dd535533 下载VMMap。

    另一方面,您的问题是windows store apps 开发问题,所以到 Windows Store Apps Forum 应该更适合您,您也会得到更好的帮助。

    希望以上可以帮到您。

    May

     


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2014年3月4日 8:07
  • Web Browser控件默认运行在IE7模式下。此模式不支持IE8或之后版本的新增功能。

    如果你要修改Web Browser控件的模拟模式,参考http://msdn.microsoft.com/en-us/library/ie/ee330730(v=vs.85).aspx#browser_emulation



    Visual C++ MVP

    • 已标记为答案 zhengbw 2014年3月7日 9:10
    2014年3月6日 18:09
    版主