Question

我使用一些CSS3渐变来绘制链接的背景，使其看起来像一个按钮。我还在链接处于活动状态时添加文本阴影。这是HTML：

<div id="inner-page-sidebar">

    <div id="secondary" class="widget-area" role="complementary">               
        <aside id="nav_menu-4" class="sidebar-four-widget widget widget_nav_menu"><h3 class="widget-title">About</h3><div class="menu-sidebar-4-menu-1-about-container"><ul id="menu-sidebar-4-menu-1-about" class="menu"><li id="menu-item-1223" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1223"><a href="http://hiddenwebdomain.com/about/the-company/">The Company</a></li>
<li id="menu-item-1134" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-1134"><a href="http://hiddenwebdomain.com/about/corporate-governance/">Corporate Governance</a></li>
<li id="menu-item-1224" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1224"><a href="http://hiddenwebdomain.com/about/employment/">Employment</a></li>
<li id="menu-item-1111" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1111"><a href="http://hiddenwebdomain.com/about/customer-service/">Customer Service</a></li>
<li id="menu-item-1113" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1113"><a href="http://hiddenwebdomain.com/about/faqs/">FAQs</a></li>
<li id="menu-item-1114" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1114"><a href="http://hiddenwebdomain.com/about/contact-us-2/">Contact Us</a></li>
</ul></div></aside>

<aside id="nav_menu-5" class="sidebar-four-widget widget widget_nav_menu"><h3 class="widget-title">Corporate Information</h3><div class="menu-sidebar-4-menu-2-corporate-info-container"><ul id="menu-sidebar-4-menu-2-corporate-info" class="menu"><li id="menu-item-1115" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1115"><a href="http://hiddenwebdomain.com/about/corporate-governance/board-of-directors/">Board of Directors</a></li>
    <li id="menu-item-1116" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1116"><a href="http://hiddenwebdomain.com/about/corporate-governance/management-team/">Management Team</a></li>
    <li id="menu-item-1117" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-645 current_page_item menu-item-1117"><a href="http://hiddenwebdomain.com/about/corporate-governance/code-of-ethics/">Code of Ethics</a></li>
    <li id="menu-item-1118" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1118"><a href="http://hiddenwebdomain.com/about/corporate-governance/audit-committee-charter/">Audit Committee Charter</a></li>
    <li id="menu-item-1119" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1119"><a href="http://hiddenwebdomain.com/about/corporate-governance/compensation-committee-charter/">Compensation Committee</a></li>
    <li id="menu-item-1120" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1120"><a href="http://hiddenwebdomain.com/about/corporate-governance/nominating-and-corporate-governance-committee-charter/">Nominating And Governance</a></li>
    <li id="menu-item-1121" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1121"><a href="http://hiddenwebdomain.com/about/corporate-governance/contact-non-management-directors/">Contact Directors</a></li>
    <li id="menu-item-1122" class="ajax-link menu-item menu-item-type-post_type menu-item-object-page menu-item-1122"><a href="http://hiddenwebdomain.com/about/corporate-governance/contact-audit-committee/">Contact Audit Committee</a></li>
    </ul></div></aside>

    </div> <!-- END INNER-PAGE-SIDEBAR -->

这是CSS：

.dealer-selector-button-gradient,
.widget_nav_menu ul li a {
    color: #505050;
    border: solid 1px #c6c6c6;  
    background: #f1f1f1;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f1f1f1)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, #ffffff, #f1f1f1); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, #ffffff, #f1f1f1); /* FF3.6+ */
    background: -ms-linear-gradient(top, #ffffff, #f1f1f1); /* IE10 */
    background: -o-linear-gradient(top, #ffffff, #f1f1f1); /* Opera 11.10+ */
    background: linear-gradient(top, #ffffff, #f1f1f1); /* W3C */
}

.dealer-selector-button-gradient:hover,
.widget_nav_menu ul li a:hover {
    background: #e4e4e4;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0e0)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, #ffffff, #e0e0e0); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, #ffffff, #e0e0e0); /* FF3.6+ */
    background: -ms-linear-gradient(top, #ffffff, #e0e0e0); /* IE10 */
    background: -o-linear-gradient(top, #ffffff, #e0e0e0); /* Opera 11.10+ */
    background: linear-gradient(top, #ffffff, #e0e0e0); /* W3C */
}

.dealer-selector-button-gradient:active,
.widget_nav_menu ul li a:active {
    color: #505050;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    background: #f5f5f5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#ffffff)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top, #f1f1f1, #ffffff); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top, #f1f1f1, #ffffff); /* FF3.6+ */
    background: -ms-linear-gradient(top, #f1f1f1, #ffffff); /* IE10 */
    background: -o-linear-gradient(top, #f1f1f1, #ffffff); /* Opera 11.10+ */
    background: linear-gradient(top, #f1f1f1, #ffffff); /* W3C */
}

我必须在这里做错事，因为当我用AJAX加载该页面时，有时点击任何格式化的链接都无法生成点击事件。

我一直在测试AJAX代码，但似乎没有任何问题。

然后我删除了CSS，果然，每次都会发生click事件。

更新：我实际上在浏览器中禁用了JavaScript，并且在没有JavaScript的情况下测试了该页面，并且出于某种原因，并非每次都有，但是在大约50次左右点击后，点击格式化的链接不起作用。

更新2 ：为了让事情更奇怪，如果链接无法打开新页面（即使在浏览器中禁用了JS），我可以点击它一百次，它赢了不起作用 - 但稍微移动光标，按像素移动，然后再次单击 - 启用链接。

什么可能导致这个问题？有没有办法以不同方式重新创建相同的CSS，以确保CSS不会干扰click事件？

Answer 1

通过评论中的扩展讨论，找到了我自己的答案。写这个答案，以防有人遇到类似问题并到达此页面。

罪魁祸首是一个小规则，实际上隐藏在样式表的其他地方 - 但应用于同一个元素，就像建议的那样。

该规则将margin-top: 1px;添加到处于活动状态的按钮。出于某种原因，即使按钮生成mousedown事件，它也无法click事件。

删除该规则解决了这个问题。

CSS3阻止AJAX点击事件

1 个答案: