ASP.NET 3.5 页面中的 Webkit 点击高亮颜色，包括 ScriptManager答案

【问题标题】：Webkit tap highlight color in ASP.NET 3.5 Pages including a ScriptManagerASP.NET 3.5 页面中的 Webkit 点击高亮颜色，包括 ScriptManager
【发布时间】：2011-11-01 15:31:07
【问题描述】：

我们正在使用 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 的客户端初始化似乎以某种方式覆盖了它。

【问题讨论】：

标签： android asp.net ios mobile jquery-mobile

【解决方案1】：

ScriptManager 正在向表单元素添加点击处理程序，因此实际上 webkit 正在拦截表单上的点击 - 从 DOM 角度来看，H1 恰好在其中。

您可以通过将<form> 标签移到<H1></H1> 标签之后来证明这一点，当然这对您的所有元素都不实用。

我认为添加“-webkit-tap-highlight-color”的方法是有效的，但也许你需要在脚本管理器完成它的工作后这样做：

       $(document).ready(function(){
    $('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)'); 
       });

您还可以尝试将 css 内联添加到特定的 form/h1 元素中，以消除 css 级联或脚本问题。

【讨论】：