집 > 기사 > 웹 프론트엔드 > a:액티브 플러스 애니메이션 클릭 유효하지 않은 솔루션

a:액티브 플러스 애니메이션 클릭 유효하지 않은 솔루션

php中世界最好的语言원래의: 2017-11-27 11:37:062312검색

a:active addedanimationclick이 유효하지 않은 문제가 자주 발생합니다. 오늘은 제 코드와 해결 방법을 보여드리고, 그런데 URL 점프를 기록하지 않는 방법에 대해 알려드리겠습니다. 역사.

a 태그: 액티브 플러스 애니메이션 클릭이 유효하지 않습니다

내 CSS 코드는 다음과 같습니다:

.haorooms{  -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;  animation:  jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }

html 코드는 다음과 같습니다:

<a class="haorooms delay3 " href="/jingpin/"  ></a>

Apple 휴대폰에서는 태그 클릭이 유효하지 않습니다. 확인해 보니 a 태그가 차단되지 않는 이유가 무엇인가요? 어떻게 해결하나요?

이런 상황이 발생한 이유는 액티브의 경우 1초 애니메이션이 있기 때문입니다. 버튼을 길게 누르면 점프할 방법이 없습니다.

a 태그: 액티브 플러스 애니메이션 클릭 무효 해결

사실 이 문제에 대한 해결 방법은 여러 가지가 있는데, 휴대폰으로 보여주고 있기 때문이고, 애니메이션 재생 후 점프하는 효과도 추가할 수 있습니다. ontouchend 이벤트, touchend 이후 주소로 이동합니다.

ontouchend="window.location.href=&#39;/jingpin/&#39;"

이것을 추가한 후 길게 누르거나 클릭해도 끝부분을 누르면 지정된 주소로 점프할 수 있습니다.

돌아올 때 페이지 점프 기록이 기록되지 않습니다

검색 기록 저장에 대해서는 이전 기사에서 언급한 적이 있습니다: SPA 단일 페이지 웹 애플리케이션 및 새로 고침이 없는 Ajax 페이지 전환, 기록 뒤로 및 앞으로 솔루션에 대한 소개

우리 브라우저 기록은

history.replaceState 
history.pushState(state, title, url)

를 통해 조작할 수 있습니다.

하지만 실제 상황에서는 검색 기록을 기록할 필요가 없는 상황도 있습니다. 예를 들어 "한 페이지에 탭 전환 라벨이 두 개 있는데, 탭 전환을 하면 브라우저 주소가 변경됩니다." 기본적으로 역사. 따라서 돌아가기 버튼을 클릭하면 두 탭 사이를 계속 전환하지만 실제로는 두 탭 사이를 전환하는 것이 아니라 이전 페이지로 돌아가기를 원합니다. 그렇다면 이 상황을 어떻게 해결해야 할까요?

우리는

location.replace(newURL)

replace() 메소드가 History object에 새 레코드를 생성하지 않을 것이라고 생각했습니다. 이 방법을 사용하면 새 URL이 기록 개체의 현재 레코드를 덮어씁니다.

그래서 다음과 같이 코드를 작성할 수 있습니다:

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">标签一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>
$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) { //tab中a标签点击
    event.preventDefault();
    location.replace(this.href);
})

위 코드는 일부 휴대폰에서 유효하지 않은 반환을 반환하므로 해결이 실패합니다!

history.replaceState() 및 location.replace() 메소드

위의 메소드가 실패하여 마음을 바꿔야 했습니다. 얼마 전에 Zhang Xinxu 선생님께서 비슷한 사례 솔루션을 보신 것을 보고 배웠습니다.

해결책은 다음과 같습니다.

$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split(&#39;#&#39;)[0] + &#39;#&#39;);
    location.replace(&#39;&#39;);
})

먼저 HTML5의history.replaceState() 메소드를 통해 현재 URL 주소를 #으로 끝나는 현재 링크 주소로 바꿉니다.

Execute location.replace('') 현재 주소를 새로 고치려면(이 #는 무시됩니다)

이 솔루션을 사용하면 탭을 어떻게 전환하든 돌아가기를 클릭하면 평소처럼 페이지의 이전 페이지로 돌아갑니다. 더 이상 탭 사이를 전환할 필요가 없습니다!

history.replaceState는 IE10에서만 지원되기 때문에 이전 브라우저와 호환되거나 PC에서 사용하려는 경우. Zhang Dashen도 함수를 캡슐화한 것을 보고 여기에서 빌려보겠습니다.

var fnUrlReplace = function (eleLink) {
    if (!eleLink) {
        return;
    }
    var href = eleLink.href;
    if (href && /^#|javasc/.test(href) === false) {
        if (history.replaceState) {
            history.replaceState(null, document.title, href.split(&#39;#&#39;)[0] + &#39;#&#39;);
            location.replace(&#39;&#39;);
        } else {
             location.replace(href);
        }
    }
};

위 함수는 다음과 같이 적용할 수 있습니다.

$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) {
  if (event && event.preventDefault) {
      event.preventDefault();
   }
   fnUrlReplace(this);
   return false;
})

이 사례를 읽으신 후 방법을 숙달하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주의하세요. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!