[iphone] : 활성 가상 클래스가 모바일 사파리에서 작동하지 않습니다.

Program / 글쓴이

iPhone / iPad / iPod의 Webkit에서 <a>태그 의 : active 의사 클래스에 대한 스타일 지정 은 요소를 탭할 때 트리거되지 않습니다. 이것을 트리거하려면 어떻게해야합니까? 예제 코드 :

<style>
a:active {
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>

답변

<body ontouchstart="">
    ...
</body>

모든 버튼 요소가 페이지의 모든 버튼을 수정하는 것과 달리 한 번만 적용되었습니다. 또는 ‘ Fastclick ‘ 이라는 작은 JS 라이브러리를 사용할 수 있습니다 . 터치 장치에서 클릭 이벤트 속도를 높이고이 문제도 처리합니다.

답변

다른 답변에서 언급했듯이 iOS Safari는 :active터치 이벤트가 요소에 연결되지 않는 한 의사 클래스를 트리거하지 않지만 지금까지이 동작은 “마 법적”이었습니다. 나는 그것을 설명 하는 Safari 개발자 라이브러리 에서이 작은 설명을 발견했습니다 (강조).

또한 -webkit-tap-highlight-colorCSS 속성을 터치 이벤트 설정과 함께 사용하여 버튼이 데스크탑과 유사하게 작동하도록 구성 할 수 있습니다. iOS에서는 마우스 이벤트가 너무 빨리 전송되어 다운 또는 활성 상태가 수신되지 않습니다. 따라서 :active의사 상태는 HTML 요소에 터치 이벤트가 설정된 경우에만 트리거됩니다 (예 : 요소에 ontouchstart가 다음과 같이 설정된 경우).

<button class="action" ontouchstart=""
        style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
    Testing Touch on iOS
</button>

이제 iOS에서 버튼을 누르고 있으면 주변의 투명한 회색 색상이 나타나지 않고 버튼이 지정된 색상으로 변경됩니다.

즉, ontouchstart이벤트를 설정하는 것은 (비어 있더라도) 브라우저가 터치 이벤트에 반응하도록 명시 적으로 지시하는 것입니다.

제 생각에는 이것은 결함이있는 행동이며, 아마도 “모바일”웹이 기본적으로 존재하지 않았던 때로 거슬러 올라갑니다 (링크 된 페이지의 스크린 샷을 보시고 제가 의미하는 바를 확인하십시오). 모든 것이 마우스 지향적이었습니다. Android와 같은 다른 최신 모바일 브라우저는 iOS에 필요한 것과 같은 해킹없이 터치시`: active ‘의사 상태를 잘 표시한다는 점이 흥미 롭습니다.

(참고 : iOS에서 사용자 지정 스타일을 사용하려는 경우 위의 동일한 링크 페이지에 설명 된대로 CSS 속성 :active을 사용하여 iOS에서 의사 상태 대신 사용하는 기본 회색 반투명 ​​상자를 비활성화 할 수도 있습니다. -webkit-tap-highlight-color.)

몇 가지 실험 후 모든 터치 이벤트가 버블 링 된 요소에 ontouchstart이벤트를 설정하는 예상 솔루션이 완전히 작동하지 않습니다. 페이지가로드 될 때 요소가 뷰포트에 표시되면 제대로 작동하지만 아래로 스크롤하여 뷰포트를 벗어난 요소를 탭해도 의사 상태가 트리거 되지 않습니다 . 그래서 대신<body>:active

<!DOCTYPE html>
<html><body ontouchstart></body></html>

본문에 버블 링되는 이벤트에 의존하는 대신 모든 요소에 이벤트를 첨부합니다 (jQuery 사용).

$('body *').on('touchstart', function (){});

그러나 나는 이것의 성능 영향을 알지 못하므로 조심하십시오.

편집 : 이 솔루션에는 심각한 결함이 하나 있습니다. 페이지를 스크롤하는 동안 요소를 터치해도 :active의사 상태 가 활성화됩니다 . 감도가 너무 강합니다. Android는 상태가 표시되기 전에 매우 작은 지연을 도입하여이 문제를 해결합니다. 이는 페이지가 스크롤되면 취소됩니다. 이를 고려하여 선택한 요소에만 이것을 사용하는 것이 좋습니다. 제 경우에는 기본적으로 페이지를 탐색하고 작업을 제출하는 버튼 목록 인 현장에서 사용할 웹 앱을 개발 중입니다. 전체 페이지가 어떤 경우에는 거의 버튼이기 때문에 이것은 나를 위해 작동하지 않습니다. 그러나 :hover대신이를 채우기 위해 의사 상태를 설정할 수 있습니다 . 기본 회색 상자를 비활성화하면 완벽하게 작동합니다.

답변

<a> 태그에 ontouchstart에 대한 이벤트 핸들러를 추가하십시오. 이로 인해 CSS가 마술처럼 작동합니다.

<a ontouchstart="">Click me</a>

답변

이것은 나를 위해 작동합니다.

document.addEventListener("touchstart", function() {},false);

참고 :이 트릭을 수행하는 경우 다음 CSS 규칙을 사용하여 Mobile Safari가 적용되는 기본 탭 강조 표시 색상을 제거하는 것도 좋습니다.

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

답변

2016 년 12 월 8 일부터 수락 된 답변 ( <body ontouchstart="">...</body>)은 Safari 10 (iPhone 5s)에서 작동하지 않습니다.이 해킹은 페이지로드시 표시되는 요소에만 적용됩니다.

그러나 다음을 추가합니다.

<script type='application/javascript'>
  document.addEventListener("touchstart", function() {}, false);
</script>

는에 head이제 스크롤 동안 모든 터치 이벤트가 트리거된다는 단점과 함께, 내가 원하는 방식으로 작동하지 :active터치 된 요소에 의사 상태. (이게 문제인 경우 FighterJet의 :hover 해결 방법을 고려할 수 있습니다 .)

답변

//hover for ios
-webkit-tap-highlight-color: #ccc;

이것은 나를 위해 작동합니다. 강조하려는 요소의 CSS에 추가하십시오.

답변

모든 의사 클래스를 사용하고 있습니까? 아니면 하나만 사용하고 있습니까? 두 개 이상을 사용하는 경우 올바른 순서인지 확인하십시오.

a:link
a:visited
a:hover
a:active

..그와 같은 순서로. 또한 : active를 사용하는 경우 스타일을 지정하지 않더라도 a : link를 추가하십시오.