WP7 + HTML5 - 如何防止画布被选中/突出显示答案

【问题标题】：WP7 + HTML5 - How to prevent a canvas from being selected/highlightedWP7 + HTML5 - 如何防止画布被选中/突出显示
【发布时间】：2012-03-22 02:10:32
【问题描述】：

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

我尝试在正文中使用 CSS 来消除这种行为。到目前为止没有任何效果。

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;
}

提前感谢您的帮助！

【问题讨论】：

标签： css html windows-phone-7

【解决方案1】：

他们为 WP8 添加了支持：

<meta name="msapplication-tap-highlight" content="no"/>

来源： http://sgrebnov.blogspot.de/2012/10/windows-phone-8-for-html5js-developers.html

【讨论】：

【解决方案2】：

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

所以我做了一些挖掘并注意到上面的示例将事件附加到窗口对象。我把它归结为文件“动力学-v3.8.4.js”的以下三行修改：

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

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

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

修改后，画布仍然有反应，不需要的突出显示消失了。

问候，路易斯

【讨论】：

【解决方案3】：

无法关闭此灰色突出显示。请参阅此相关问题：

Windows Phone 7 Browser - Turn off the gray shading when links are clicked

您设置的 CSS 属性 -webkit-tap-hightlight-color 是特定于 webkit 的，因此适用于 Android 和 iOS。直到 WP7 有一个等价物，你才能坚持下去！

【讨论】：

【解决方案4】：

在标题中添加元标记实际上解决了这个问题

请添加这个

 <meta name="msapplication-tap-highlight" content="no"/>

【讨论】：

【解决方案5】：

在 html 文件的 head 部分中添加元标记。

<meta name="msapplication-tap-highlight" content="no" />

它应该可以工作。

问候，普拉维什

【讨论】：