WP7 + HTML5 - 如何防止画布被选中/突出显示 [英] WP7 + HTML5 - How to prevent a canvas from being selected/highlighted

问题描述

我想为Windows Phone 7 / 7.5编写一个简单的HTML 5应用程序。我有一个HTML5页面，一个画布几乎与屏幕的大小。当我点击/点击屏幕时，画布被选中。我不想要这种行为，但我仍然希望能够单击/点击各种控件。有没有办法不具有这种行为？以下是显示效果的屏幕截图的链接。

I am trying to write a simple HTML 5 app for Windows Phone 7/7.5. I have a HTML5 page with a canvas almost the size of the screen. When I click/tap on the screen, the canvas is selected. I don't want that behavior, but I still want to be able to click/tap on various controls. Is there a way to not have that behavior? Below is the link of a screenshot showing the effect.

我试图在正文中使用CSS删除该行为。没有什么工作到目前为止。

I tried to remove that behavior using CSS in the body. Nothing has worked so far.

body {
    /* disable selections / cut copy paste actions */
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* disable callout, image save panel on long press */
    -webkit-touch-callout: none;

    /* "turn off" link highlight, good for custom pressed states */
    -webkit-tap-hightlight-color: transparent;
}

感谢您的帮助！

推荐答案

Martin提到，以下示例不显示突出显示行为：
http://ie.microsoft.com/testdrive/Mobile/Performance/HamsterDanceRevolution/Default.html

Martin mentioned that the following example does not exhibit the highlight behavior: http://ie.microsoft.com/testdrive/Mobile/Performance/HamsterDanceRevolution/Default.html

所以我做了一些挖掘，注意到上面的例子将事件附加到窗口对象。我得到了以下三行修改的文件kinetic-v3.8.4.js：

So I did some digging and noticed that the above example attaches events to the window object. I got it down to the following three line modifications of the file "kinetic-v3.8.4.js":

（1）

这个。 container.addEventListener（baseEvent，handler，false）;

- >

window.addEventListener（baseEvent，handler，false）;

(1)
this.container.addEventListener(baseEvent, handler, false);
-->
window.addEventListener(baseEvent, handler, false);

（2）

this.container.addEventListener（'mousedown'，function（evt）

- >

窗口。 addEventListener（'mousedown'，function（evt）

(2)
this.container.addEventListener('mousedown', function(evt)
-->
window.addEventListener('mousedown', function(evt)

（3）

this.container.addEventListener（'mousedown'，function（evt）< br>
- >

window.addEventListener（'mouseup'，function（evt）

(3)
this.container.addEventListener('mousedown', function(evt)
-->
window.addEventListener('mouseup', function(evt)

回复，
Luis

Regards, Luis

这篇关于WP7 + HTML5 - 如何防止画布被选中/突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！