我们正在使用 ASP.NET 3.5 开发一个 jQuery Mobile 应用程序,我们遇到了一个问题,其中有很多大的、形状奇怪的、令人分心的点击高亮。我发现在我们的例子中,页面中包含 ScriptManager 似乎是罪魁祸首。这是一个应该重现问题的简单 .aspx 页面(我正在 Android 2.2.2 和 iOs 4.2.6 上进行测试)。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
<h1>Oh Hai!</h1>
</form>
</body>
</html>
使用 ScriptManager,每次触摸 h1 标签时都会产生点击高亮。丢失 ScriptManager,点击突出显示消失。假设 ScriptManager 是必要的,有什么比做这样的事情更好的了:
<script type="text/javascript">
$(function () {
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
})
</script>
向我们的样式表添加 css 规则不起作用,因为 ScriptManager 的客户端初始化似乎以某种方式覆盖了它。
最佳答案
ScriptManager
正在向表单元素添加点击处理程序,因此实际上 webkit 正在拦截对表单的点击 - H1
从 DOM 的角度来看,恰好在其中。
您可以通过移动 <form>
来证明这一点<H1></H1>
之后的标签标签,自然不会对所有元素都实用。
我认为添加“-webkit-tap-highlight-color”的方法是有效的,但也许您需要在脚本管理器完成它的工作后执行此操作:
$(document).ready(function(){
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
});
您还可以尝试将 css 内联添加到特定的 form/h1 元素,以消除 css 级联或脚本问题。
关于android - Webkit 在 ASP.NET 3.5 页面中点击突出显示颜色,包括 ScriptManager,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7968826/