使用 PhoneGap / Cordova 时如何在 WP7 IE 中禁用选择/剪贴板行为答案

【问题标题】：How to disable select/clipboard behavior in WP7 IE when using PhoneGap / Cordova使用 PhoneGap / Cordova 时如何在 WP7 IE 中禁用选择/剪贴板行为
【发布时间】：2012-05-18 18:20:59
【问题描述】：

我正在尝试使用 Cordova 1.7.0 为 WP7 创建一个简单的 Phonegap/Cordova 应用程序。

VS 2012 项目模板在 index.html 中显示一个简单的欢迎消息。当您触摸屏幕上的文本时，文本变为选中状态，并显示剪贴板图标。此外，如果您的页面包含图片，则触摸图片会将其突出显示为选中状态。

这种行为导致 UI 无法使用，我该如何防止？

我尝试过的是： a) 所有 CSS -ms-user-selectable: none 等，和 b) 元素中的 uselectable='on' 属性。

这些都不会妨碍 UI 元素的可选择性。

（注意 WP7 是 Mango）

有什么想法吗？

谢谢

【问题讨论】：

标签： windows-phone-7 cordova

【解决方案1】：

我已经用绝对定位的伪元素解决了这个问题。例如，您有一个带有文本的元素，您希望避免选择文本：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae orci condimentum magna sagittis congue eu at diam. <a href="#">Learn more</a></p>

CSS：

p {
    position:relative;
    z-index: 0;
}

p:before {
    content:''; 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    z-index:1;
}

p a {
    position:relative; 
    z-index:2;
}

添加链接的 Z-index 以保留点击它的可能性，因此如果您在此块中有其他可点击元素，请小心。与 WP7 的很多东西一样，解决方案很丑陋，但它确实有效。

【讨论】：