:active pseudo-class는 모바일 사파리에서 작동하지 않습니다.
에서 iPhone/iPad/iPod의 Webkit :active pseudo-class 대링 <a>요소를 누를 때 태그가 트리거되지 않습니다.어떻게 하면 이걸 작동시킬 수 있을까요?코드 예제:
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>
<body ontouchstart="">
...
</body>
모든 버튼 요소가 페이지의 모든 버튼을 수정하는 것과 달리 한 번만 적용되었습니다.또는 'Fastclick'이라는 작은 JS 라이브러리를 사용할 수 있습니다.터치 장치의 클릭 이벤트 속도를 높이고 이 문제도 해결합니다.
는 iOS Safari를 트리거하지 :active요소에 터치 이벤트가 부착되지 않는 한 유사 클래스이지만, 지금까지 이 동작은 "비활성화"되었습니다.Safari Developer Library(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에서 버튼을 누르고 있으면 주변에 투명한 회색이 나타나지 않고 지정된 색상으로 변경됩니다.
다시말해설, ▁an를 설정하는 입니다.ontouchstart이벤트(비워져 있더라도)는 터치 이벤트에 반응하도록 브라우저에 명시적으로 지시합니다.
제 생각에, 이것은 결함이 있는 행동이며, 아마도 "모바일" 웹이 기본적으로 존재하지 않았던 시대로 거슬러 올라가며(링크된 페이지의 스크린샷을 보고 제가 의미하는 바를 확인하십시오) 모든 것이 마우스 지향적이었습니다.Android와 같은 다른 최신 모바일 브라우저는 iOS에 필요한 것과 같은 해킹 없이 ':active' 유사 상태를 터치 시 잘 표시한다는 점이 흥미롭습니다.
(단, 참고: 사용자 하려면 iOS 대신 할 수도 있습니다.:active를사하 상사태의를 .-webkit-tap-highlight-color위의 동일한 링크 페이지에서 설명한 바와 같이 CSS 속성.
약간의 실험 후에, 예상되는 해결책은 다음과 같습니다.ontouchstart의 <body>모든 터치 이벤트가 버블링되는 요소가 완전히 작동하지 않습니다.페이지가 로드될 때 요소가 뷰포트에 표시되면 잘 작동하지만, 아래로 스크롤하여 뷰포트 밖에 있던 요소를 눌러도 다음이 트리거되지 않습니다.:active유사 국가여야 합니다.래서그 대신에 에신대.
<!DOCTYPE html>
<html><body ontouchstart></body></html>
(jQuery를 사용하여) 본문으로 버블링되는 이벤트에 의존하는 대신 모든 요소에 이벤트를 연결합니다.
$('body *').on('touchstart', function (){});
하지만 저는 이것의 성능에 대한 영향을 알지 못하므로 주의해야 합니다.
편집: 이 솔루션에는 한 가지 심각한 결함이 있습니다. 페이지를 스크롤하는 동안 요소를 터치해도 활성화됩니다.:active강합니다.감도가 너무 강합니다.Android는 상태가 표시되기 전에 매우 작은 지연을 도입하여 이 문제를 해결합니다. 이 지연은 페이지를 스크롤하면 취소됩니다.이러한 점을 고려하여 일부 요소에서만 사용할 것을 제안합니다.저의 경우, 저는 현장에서 사용하기 위해 기본적으로 페이지를 탐색하고 동작을 제출하기 위한 버튼 목록인 웹 앱을 개발하고 있습니다.어떤 경우에는 전체 페이지가 상당히 많은 버튼이기 때문에, 이것은 저에게 맞지 않을 것입니다.그나설수있다니습할정러▁the를 설정할 수 .: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);
}
8. 합격자(2016. 12. 8. 자)<body ontouchstart="">...</body> 10에서 작동하지 않습니다. 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를 사용하는 경우 스타일을 지정하지 않더라도 :link를 추가합니다.
온터치 스타트를 사용하지 않으려는 사용자는 이 코드를 사용할 수 있습니다.
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
이 문제를 해결할 수 있는 도구를 게시했습니다.
겉으로는 문제가 간단해 보이지만 실제로는 시간 초과 기능과 "링크 목록을 스크롤할 때 발생하는 작업" 또는 "링크를 누른 다음 마우스/손가락을 활성 영역에서 멀어질 때 발생하는 작업"과 같은 작업을 포함하여 터치 앤 클릭 동작을 상당히 광범위하게 사용자 지정해야 합니다.
이 모든 것이 한 번에 해결될 것입니다. https://www.npmjs.com/package/active-touch
.active 클래스에 :active 스타일을 할당하거나 자신의 클래스 이름을 선택해야 합니다.기본적으로 스크립트는 모든 링크 요소에서 작동하지만 사용자가 직접 선택기 배열로 덮어쓸 수 있습니다.
정직하고 도움이 되는 피드백과 기여에 감사드립니다!
저는 이 답변과 그 변형을 시도했지만, 어느 것도 안정적으로 작동하는 것 같지 않았습니다(그리고 저는 이런 것들에 '마법'에 의존하는 것을 싫어합니다).그래서 대신 다음과 같은 작업을 수행했는데, 이 작업은 Apple뿐만 아니라 모든 플랫폼에서 완벽하게 작동합니다.
- CSS 언이변을 사용한
:active.active. 영향을 받는 모든 요소의 목록을 만들고 추가했습니다.
pointerdown/mousedown/touchstart하여 " " " 를 할 수 있습니다..active과 와스래클와▁andpointerup/mouseup/touchend이벤트 핸들러에서 제거합니다.사용하기:jQuery 용:let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown"; let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave"; let clickableThings = '<comma separated list of selectors>'; $(clickableThings).on(controlActivationEvents,function (e) { $(this).addClass('active'); }).on(controlDeactivationEvents, function (e) { $(this).removeClass('active'); });
이것은 조금 지루했지만, 지금은 애플 OS 버전 사이의 파손에 덜 취약한 솔루션을 가지고 있습니다. (그리고 누가 이런 파손이 필요합니까?)
▁on다에 입니다.:target에 :active:
<style>
a:target {
background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>
스타일은 앵커가 모바일에서도 강력한 현재 URL을 대상으로 할 때 트리거됩니다.단점은 URL의 앵커를 지우려면 다른 링크가 필요하다는 것입니다.전체 예:
a:target {
background-color: red;
}<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>이 질문과 100% 관련이 없지만, 이를 달성하기 위해 CSS 형제 해킹을 사용할 수도 있습니다.
HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>
SCSS
input {
&:checked + label {
background-color: red;
}
}
순수 html/css 툴팁을 사용하려면
span {
display: none;
}
input {
&:checked ~ span {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
a{color: red;}
a:hover{color: blue;}
</style>
</head>
<body>
<div class="main" role="main">
<a href="#">Hover</a>
</div>
</body>
</html>
언급URL : https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
'programing' 카테고리의 다른 글
| Flow Layout Panel - 컨트롤의 자동 너비? (0) | 2023.05.31 |
|---|---|
| NSMutableArray를 NSAray로 변환하려면 어떻게 해야 합니까? (0) | 2023.05.31 |
| NS Notification Center와 동등한 Android (0) | 2023.05.31 |
| iPhone의 NS 문자열에 대한 AES 암호화 (0) | 2023.05.31 |
| Mac 키보드를 사용하여 iphone 시뮬레이터의 텍스트 필드를 입력할 수 없습니까? (0) | 2023.05.31 |