CSS3 AJAX 클릭 이벤트 방지

Question

나는 CSS3 그래디언트를 사용하여 링크의 배경을 페인트하여 버튼처럼 보이게합니다. 링크가 활성화되면 텍스트 그림자도 추가됩니다. 때때로, 나는 AJAX와 해당 페이지를로드 할 때 때문에

가

.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 */ 
} 

, 내가 여기서 잘못하고 있어요 뭔가가 있어야 다음은 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의 이와 같이 형식화 된 링크를 클릭하면 클릭 이벤트가 생성되지 않습니다.

나는 AJAX 코드를 통해 테스트 했으므로 아무 문제가없는 것으로 보인다.

그런 다음 CSS를 제거 했으므로 클릭 이벤트가 발생할 때마다 발생합니다.

업데이트 : 나는 실제로 브라우저에서 JavaScript를 비활성화하고 JavaScript없이 페이지를 테스트합니다 .

업데이트 2는 : 링크가 (JS 브라우저에서 사용할 수도 함께) 새 페이지를 열려면 실패 할 경우 내가 그것을 백 번을 클릭 할 수 있습니다, 심지어 낯선 일을하려면, 그것은 작동하지 않습니다 - 커서를 약간 움직이고 픽셀 단위로 이동 한 다음 다시 클릭하면 링크가 활성화됩니다.

해당 문제의 원인은 무엇입니까? CSS가 클릭 이벤트를 방해하지 않도록 동일한 CSS를 다르게 만드는 방법이 있습니까?

Answer 1

의견에 대한 확장 토론 덕분에 내 답변을 찾았습니다. 누구나 비슷한 문제가 발생하여이 페이지에 도착할 경우를 대비하여이 답변을 작성하십시오.

범인은 실제로 스타일 시트의 다른 곳에 숨겨져 있지만 제안 된 것과 동일한 요소에 적용된 작은 규칙이었습니다.

해당 규칙은 활성 상태의 버튼에 margin-top: 1px;을 추가했습니다. 어떤 이유로 버튼이 mousedown 이벤트를 생성했지만 이벤트가 click이되지 않았습니다.

해당 규칙을 제거하면 문제가 해결되었습니다.