Question

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

Answer 1

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内联添加到特定表单/ h1元素，以消除css级联或脚本问题。

Webkit在ASP.NET 3.5页面中点击突出显示颜色，包括ScriptManager

1 个答案: