모바일 사파리에서 onclick 블록 복사 + 붙여 넣기를 하시겠습니까?

배경 : 나는 기본적으로 this other Mobile Safari Event Issue question에 설명 된 것과 똑같이 작동하는 드롭 다운 메뉴를 가지고 있습니다. 드롭 다운을 표시하려면 메뉴 항목을 클릭하고 메뉴 항목을 다시 클릭하거나 페이지의 아무 곳이나 클릭하여 메뉴를 숨 깁니다. 드롭 다운을 숨기는 jQuery는 전체 윈도우에 걸쳐있는 부모 <div>의 클릭 이벤트에 바인딩됩니다. 이 드롭 다운은 모바일 사파리를 비롯한 모든 브라우저에서 A-OK로 작동하며 여기서는 컨텍스트를 위해서만 설명합니다.모바일 사파리에서 onclick 블록 복사 + 붙여 넣기를 하시겠습니까?

문제 :이 onclick 이벤트는 Mobile Safari (iPod Touch 4.2.1 및 iPad 4.3.5에서 테스트 됨)에서 정상적인 터치 및 홀드를 얻지 못하게합니다. 우리 사이트 어디서나 팝업을 붙여 넣으십시오. D' oh! 내 연구 결과에 따르면 HTML 요소에 클릭 핸들러가 정의되어 있으면 포함 된 콘텐츠를 복사 할 수없는 것 같습니다. 로) (나는 그것이 jQuery를 문제가 아니라고 설명하기 위해이 데모에서 바로 자바 스크립트를 사용하고, 그러나 이것은 jQuery의 .click 작업을 실패

여기 벗겨진 다운 데모 (업데이트를 설정 한 잘) : http://adamnorwood.com/ios-copypaste.html

모바일 사파리에서 링크를 열면 lorem ipsum 텍스트를 복사 할 수 없어야합니다. 그러나 텍스트를 클릭하면 console.log()를 통해 메시지가 표시됩니다. 클릭 핸들러가 실행 중임을 나타냅니다.

여기에 링크 다운이 경우, 그것의 요점 간다이다 : 나는 시도했다

<div id="content">Imagine a large block of text here...</div> <script> document.getElementById('content').onclick = function() { console.log('You just clicked me!'); } </script>

것들 :

-webkit-user-select: text

described here로 onMouseUp에 사용 onclick (nope) 대신 다른 이벤트. iOS Handling Events documentation에

그림 6-4 <body> 태그 또는 윈도우 객체에 온 클릭 이동
는

...
관련이 있지만, 무엇을해야하는지에 대한 위대한 계시로 나를 인도하지 않았다

의견이 있으십니까? 이게 그것이 작동하도록되어있는 방식입니까, 아니면 뭔가 빠져 있습니까? 이 텍스트를 선택 가능하게하는 방법이 있습니까? 그렇지만 클릭 핸들러를 여전히 실행 하시겠습니까? 아니면이 문제를 완전히 피할 수 있도록 드롭 다운 메뉴를 가장 잘 숨기는 방법에 대해 드로잉 보드로 돌아 가야할까요?

출처

2011-08-11 Adam Norwood

이벤트 위임을 사용하면이 문제가 특히 나쁩니다. jquery의 $ ('body') delegate ("myclickable", "click", function() {...})를 사용한다면 전체 페이지의 텍스트를 텍스트로 선택할 수 없습니다. iOS. 제 해결 방법은 신경 쓰이는 모든 링크에 클릭 핸들러를 비효율적으로 추가하는 것입니다 (혼합 텍스트 및 링크 드롭 다운 메뉴에서도 가능). –

아하,이 문제를 2 주 동안 멀리 버너에 넣은 후, 갑자기 마음이 고쳐졌습니다 (적어도 이것은 언뜻보기에는 효과가있는 것 같습니다). 대신 이것에 대한 .onclick()을 사용하여 (또는 jQuery의 .click())의 모바일 사파리가 touchstart 이벤트 핸들러를보다 효율적으로 사용 할 수 있습니다 : 장소에이 코드

<div id="content">Imagine a large block of text here...</div> 
<script> 
    document.addEventListener('touchstart', function() { 
     console.log('Yay, you clicked the text, and you can still copy-and-paste!'); 
    }, false); 
</script>

을 내 예를 들어, 경우에 드롭 다운 메뉴가 될 수 있습니다 문서의 다른 곳을 클릭하여 숨겨져 있으며, 표준 iOS Copy | 텍스트를 누르고 있으면 거품을 붙여 넣습니다 (원하는 정상 동작). 모바일 사파리는 '터치 스타트'리스너를 얻고 다른 브라우저는 'onclick'을 얻습니다. 이런 종류의 브라우저를 스니핑하지 않아도되는 것을 좋아하지 않지만 문제를 해결합니다. 터치 이벤트로 이것을 듣는 것이 문제가되지 않는 한, 나는 이것을 응답으로 표시 할 것입니다.

출처

2011-08-31 21:34:42

이 방법이 유용하지만 사용자가 페이지를 스크롤 할 때 메뉴가 닫히는 것이 좋습니다 (어쩌면 다른 메뉴에서는 볼 수없는 메뉴의 일부) 또는 확대/축소 (아마도 더 나은보기를 원할 것입니다. 그는 메뉴의 나머지). 이상적으로는 이러한 제스처로 인해 메뉴가 닫히지 않을 것입니다. 이것은 말하기를, 나는 그것을하는 더 좋은 방법을 찾지 못했다. – avernet

이벤트 'mousedown'도 복사/붙여 넣기 메뉴를 나눕니다. 그 대체품은 무엇입니까? – Dmitry

jQuery를 사용해 보셨습니까? jQuery는 모바일 사파리의 웹 사이트에서 저에게 효과가있는 것으로 보입니다.

<div id="content">Imagine a large block of text here...</div> 
<script type="text/javascript"> 
    $('#content').click(function() { 
     console.log('You just clicked me!'); 
    }); 
</script>

이미하지 않은 경우 당신이 당신의 <head></head> 태그에서 jQuery를 파일에 대한 링크를 포함해야합니다 :

여기 당신이 시도 할 수있는 jQuery 코드입니다.

또한 내 아이폰에 예를 시도하고 당신은 바로 내가 그것을 내 손가락을 누르고 있으면 그냥 그것을 강조 복사하지 않습니다 위치 :

iPhone screenshot

그러나, JQuery와 방법은 수도 작업.

출처

2011-08-11 21:00:53 Nathan

테스트 해 주셔서 감사합니다! jQuery의 .click()과 똑같은 JavaScript (AFAIK는 똑같이 작동해야 함)와 함께 - 내 질문을 반영하도록 수정했습니다. –

문제가 없습니다. onclick이 클릭 할 수있는 것처럼 보입니다. 링크를 클릭하십시오. 아마도 모바일 사파리는 onclick을 추가하면 링크가 될 것이라고 생각합니다. – Nathan

모바일 사파리에서 onclick 블록 복사 + 붙여 넣기를 하시겠습니까?

답변

관련 문제