<p>Leaflet 1.7.1은 Safari의 Leaflet 컨트롤에 의해 2 개의 클릭 이벤트가 발생하도록합니다.</p>

문제를 재현하는 최소한의 예

명확성을 위해 :이 예제는

    L.DomEvent.on(container, "click", function(e) {

Leaflet이 isTrusted:false 클릭 이벤트를 안전하게 필터링 할 수 있습니까?

addOne() in DomEvent.js , https://github.com/Leaflet/Leaflet/blob/4f32a5e83525a3a42980c974e48712b058510eb5/src/dom/DomEvent.js#L109 주변에서 그렇게 할 수 있습니다.

if-then-else 체인에 새 분기가 있으면 아마도

} else if (Browser.safari && !Browser.mobile && type === 'click') {
  handler = function (ev) {
    if (ev.isTrusted) { originalHandler(ev); }
  }
  obj.addEventListener('click', handler, false);
} // etc

그러나 나는 (현재) Apple 하드웨어를 소유하고 있지 않기 때문에 이것을 테스트 할 수 없습니다. 그리고 이것이 이전 버전의 데스크톱 Safari에 영향을 미칠지 모르겠습니다.

시뮬레이션 된 이벤트는 https://github.com/Leaflet/Leaflet/blob/4f32a5e83525a3a42980c974e48712b058510eb5/src/map/handler/Map.Tap.js#L100 에서 제공됩니다.

따라서 https://github.com/Leaflet/Leaflet/blob/4f32a5e83525a3a42980c974e48712b058510eb5/src/map/handler/Map.Tap.js#L87 에서 조건을 변경하는 것이 좋습니다.

같은 것으로

if (this._fireClick && e && e.changedTouches && !(Browser.safari && !Browser.mobile)) { 

그러나 나는 (현재) Apple 하드웨어를 소유하고 있지 않기 때문에 이것을 테스트 할 수 없습니다. 그리고 이것이 이전 버전의 데스크톱 Safari 또는 다른 브라우저에 영향을 미칠 수 있는지 모르겠습니다 (버그가 firefox 모바일에서 재현 될 수 있습니까?).

이 버그는

https://github.com/Leaflet/Leaflet/pull/7010/files#diff -c2e3d5ef35bf1c4a7c6b549ddf734725R134

@ johnd0e , 당신은 볼 수 있습니까? iOS 계정에 변경 사항을 도입했지만 의도하지 않게 데스크톱 macOS에 영향을 미쳤습니까?

@IvanSanchez를 조사해 주셔서 감사합니다. Mac 또는 iOS의 Safari에서 제안 된 변경 사항을 테스트하는 것을 기꺼이 도와드립니다.

추가하자면 iOS의 Safari에 관련 문제 가 있지만 약간 다르게 작동하는 것 같습니다. 나는 그것에 대해 많은 테스트를하지 않았습니다.

@ johnd0e , 당신은 볼 수 있습니까? iOS 계정에 변경 사항을 도입했지만 의도하지 않게 데스크톱 macOS에 영향을 미쳤습니까?

이는 확실히 iOS 문제를 해결하기위한 것이 었습니다. https://github.com/Leaflet/Leaflet/pull/7010 토론을 참조
그리고 우리는 너무 구체적이지 않기 위해 의도적으로 safari 속성을 사용합니다.

가능한 빠른 수정 :

• Browser.ios 속성 소개
• 또는 Browser.safari && Browser.mobile

그러나 내일 우리가 터치 스크 렌이있는 맥북을 얻을 수 있다면 어떨까요? 그것은 다시 모든 것을 깨뜨릴 것입니다.

그래서 저는 빠른 수정 ( Browser.safari && Browser.mobile )을 최대한 빨리 적용 할 것을 제안한 다음 여기에서 궁극적 인 솔루션에 대해 논의합니다. # 6980

* or use `Browser.safari && Browser.mobile`

나는이 접근법을 좋아한다 ( "빠르고 더러운"수정).

그러나 내일 우리가 터치 스크 렌이있는 맥북을 얻을 수 있다면 어떨까요? 그것은 다시 모든 것을 깨뜨릴 것입니다.

내 대답은 결국 # 7200이 될 것입니다 :-)

내 대답은 결국 # 7200이 될 것입니다 :-)

잘 모르겠습니다)
그러나 어쨌든 현재 접근 방식에 머물 수있는 모든 것을 고친 다음 더 멀리 이동하는 것을 선호합니다 (# 7200 또는 기타).

이것이 동일한 문제인지 확실하지 않지만 (기존 티켓 끝에 태그 지정을 용서하십시오) 데스크톱 Safari의 1.7.1에서도 Shift- 드래그하여 확대 할 수 있습니다. # 7260으로도이 문제가 해결되지 않은 경우 새 문제를 열어서 기쁩니다.

@systemed https://s3.amazonaws.com/leafletjs-cdn/content/leaflet/master/leaflet-src.js를 사용하여 shift-dragging을 시도해 주시겠습니까? (예 : https://plnkr.co/edit/v4GzrCYSxpIO1aOo) 이미 # 7260의 변경 사항을 포함하는 master 의 빌드입니다.

Spot on-잘 작동합니다. 👍

나타난 바와 같이 동일한 문제가 데스크톱 Safari뿐만 아니라 레거시 Edge에도 영향을 미칩니다.
AFAIK atm tap 핸들러는 iOS 에만 필요

따라서 ... map.options.tap 기본값을 false 변경해야 할 수도 있습니다.

마스터에서 빌드 한 코드를 사용하고 이벤트를 표시하여 모바일에서 쉽게 테스트 할 수 있도록 코드 펜 을 업데이트했습니다.

데스크톱 Safari에서 잘 작동하지만 안타깝게도 모바일 Safari가 여전히 두 번의 클릭 이벤트를 발생시키는 것처럼 보입니다.

https://s3.amazonaws.com/leafletjs-cdn/content/leaflet/master/leaflet-src.js 의 JS가 최신 버전 인 경우 여전히 iOS Safari에서 두 개의 클릭 이벤트를 발생시킵니다.

뿡 빵뀨
이러한 이벤트를 검사 할 수 있습니까?

다른 문제 일 수 있습니다.

touchstart (및 pointerdown )에서 우리는 여기서 click 방지합니다.
https://github.com/Leaflet/Leaflet/blob/dda26ba96d7dc79213818d1bcc0565b6ac3c69c4/src/map/handler/Map.Tap.js#L43
그리고 나는 그것이 작동하지 않는 이유를 알지 못합니다.

@ johnd0e 좀 더 자세한 정보를 얻을 수 있는지 확인하고 알려 드리겠습니다. 사용 된 요소 유형 (예 : 자체 클릭 핸들러가있는 a 또는 button 와 그렇지 않은 div )에 차이가 있습니까?

코드 펜을 업데이트하여 몇 가지 간단한 이벤트 세부 정보를 콘솔에 기록했습니다. iOS의 이벤트는이 업데이트 이전에 데스크톱에서 볼 수 있었던 것과 동일한 것 같습니다.

type: click
isTrusted: false
composed: false
_simulated: true
webkitForce: 0

type: click
isTrusted: true
composed: true
webkitForce: 1

또한 a 및 div 요소는 동일하게 작동하며 이벤트 핸들러에 e.preventDefault() 를 추가해도 문제가 해결되지 않습니다.

@ johnd0e를 시도해보고 싶은 다른 것이 있으면 알려주세요.

Safari가 자체 클릭 이벤트를 실행하는 경우 다음 줄이 필요하지 않을 수 있습니까?

https://github.com/Leaflet/Leaflet/blob/4f32a5e83525a3a42980c974e48712b058510eb5/src/map/handler/Map.Tap.js#L98 -L101

그건 그렇고, 나는 방금 확인했고 iOS의 Chrome (v85)은 두 가지 이벤트가 발생하여 동일하게 작동합니다.

좋아, 내가 찾은 내용을 참조하십시오.
1) mousedown / pointerdown 는 click 취소하지 않습니다. touchstart 수 있습니다.
2)하지만 현재 Leaflet은 다소 이상한 동작을합니다 (# 7077) : 포인터 이벤트를 사용할 수있을 때-터치 이벤트를 포인터 이벤트로 대체합니다.

이것이 우리가 이제 추가 클릭을하는 이유입니다.

이 문제를 제대로 해결하려면 # 7029, # 7026 중 하나를 채택해야합니다.
뿡 빵뀨

임시 방편으로 빠른 수정이 도움이된다면 (그리고 다른 것들을 깨뜨리지 않는 경우), 시뮬레이션 된 이벤트가 iOS의 Chrome과 Safari 모두에서 작동하는 것 같다고 주석 처리합니다.

https://github.com/Leaflet/Leaflet/blob/4f32a5e83525a3a42980c974e48712b058510eb5/src/map/handler/Map.Tap.js#L100

@systemed https://s3.amazonaws.com/leafletjs-cdn/content/leaflet/master/leaflet-src.js를 사용하여 shift-dragging을 시도해 주시겠습니까? (예 : https://plnkr.co/edit/v4GzrCYSxpIO1aOo) 이미 # 7260의 변경 사항을 포함하는 master 의 빌드입니다.

https://s3.amazonaws.com/leafletjs-cdn/content/leaflet/master/leaflet-src.js
^이 버전은 데스크톱 Safari 14.0에서 1.7.1 보다 훨씬 잘 작동하는 것 같습니다.
탭하거나 클릭하면 한 번만 실행됩니다 👍

임시 방편으로 빠른 수정이 도움이된다면 (그리고 다른 것들을 깨뜨리지 않는 경우), 시뮬레이션 된 이벤트가 iOS의 Chrome과 Safari 모두에서 작동하는 것 같다고 주석 처리합니다.

https://github.com/Leaflet/Leaflet/blob/4f32a5e83525a3a42980c974e48712b058510eb5/src/map/handler/Map.Tap.js#L100

모든 기기 (데스크톱 firefox, chrome, ios safari, chrome ..)에서 2 번 클릭 이벤트 문제가 발생하여 문제가 해결되었습니다.

같은 문제가 나에게 발생하고 Safari에서만 발생합니다. Chrome 및 Firefox는 MacOS 10.15.6 및 Safari 14.0 이후에만 이벤트를 시작합니다.

일시적으로 Leaflet을 1.6으로 다운 그레이드했고 모든 것이 정상적으로 작동합니다.

이 버그가 수정 될 가능성이 있습니까?
누구든지 그것에 대해 작동합니까?

이미 말했듯이 버그는 매우 오래된 tap 핸들러 (# 6980)로 인해 발생합니다.

일을 시작하려면 몇 가지 결정을 내려야합니다 : https://github.com/Leaflet/Leaflet/issues/7255#issuecomment -691109158
트윗 담아 가기

일을 시작하려면 몇 가지 결정을 내려야합니다. # 7255 (코멘트)

@ johnd0e 저는 이것을 테스트 할 시간도없고 iOS 하드웨어도 없습니다. 아무튼 너를 믿고있어 # 7026 (# 7029보다 깔끔한 느낌)

누구든지 그것에 대해 작동합니까?

멋진 게 뭔지 알아, @ PeterPan73? 당신이 계속해서 # 7026과 # 7029에서 몇 개의 빌드를 만들고, 유지 관리자에게 더 많은 압력을 가하는 대신 추가 호환성 문제를 테스트하는 것입니다.

그래서 저는 그린 라이팅 # 7026입니다 (# 7029보다 깔끔한 느낌)

불행히도 # 7026의 마지막 커밋에서 다른 버그 를 극복하기 위해 추악한 해결 방법을 적용해야했습니다 (# 7029 및 # 7059로 해결할 수 있음).

그래서 결국 우리는 여전히 # 7029 및 기타 연결된 PR을 다루어야 할 것이므로 https://github.com/Leaflet/Leaflet/projects/1에서 모두 통합했습니다.

iOS 기기가 활성화 된 Chrome 85 DevTools를 사용하여 macOS 10.15.7에서이 문제가 발생합니다. 나를위한 가장 빠른 해결 방법은 lodash debounce 함수를 사용하는 것입니다.

오늘 저는이 문제와 관련된 문제에 부딪 혔으므로 여기에 제 경험을 게시하겠습니다.
이것은 Macbook 트랙 패드에서 발생하며지도에 사용자 정의 컨텍스트 메뉴를 추가하려고 할 때 발견했습니다.
지도에 초점이 맞춰지면 컨텍스트 메뉴를 마우스 오른쪽 버튼으로 클릭하더라도 Leaflet은 실행되지 않아야하고 button 값이 0 인 시뮬레이션 된 _click_ 이벤트를 실행합니다. 이로 인해 컨텍스트 메뉴에 대한 내 닫기 핸들러.

버그를 생성하려면 https://leafletjs.com으로 이동 한 다음 다음을 수행하십시오.

1. 지도를 클릭합니다 (지도에 초점이 있음).
2. "마우스 오른쪽 버튼으로 클릭"
3. 지도를 클릭하십시오
4. "마우스 오른쪽 버튼으로 클릭"

커서가 드래그 모드에 있고지도를 두 번 클릭하면 (한 번 닫기 컨텍스트 메뉴와 한 번 클릭 이벤트를 트리거 함)지도가 점프합니다.

다른 문제와도 관련이있을 수 있습니다 (예 : # 6865).

이 두 번 클릭 이벤트 (하나는 신뢰할 수 있고 하나는 그렇지 않음)는 데스크톱 Linux에서 Chrome 및 Firefox에서 모바일을 시뮬레이션 할 때 1.7.1에서 발생합니다 (1.6에서는 발생하지 않음). 하지만 실제 Android 터치 장치에서 잘 작동합니다 (Chrome / Firefox 테스트 됨). 지금은 클릭 이벤트 핸들러에서 자체 바운스 타이머를 구현하여 마지막 이벤트에서 150ms 이내에 발생하는 클릭을 필터링하여이 문제를 해결했습니다.

지금은 클릭 이벤트 핸들러에서 자체 바운스 타이머를 구현하여 마지막 이벤트에서 150ms 이내에 발생하는 클릭을 필터링하여이 문제를 해결했습니다.

@atorger 님 , 어떻게 구현 하셨나요? onClick 이벤트 핸들러에서 event.originalEvent.preventDefault(); 시도했지만 성공하지 못했습니다. 최소한의 예를 공유 할 수 있습니까? 🙏 😄

지금은 클릭 이벤트 핸들러에서 자체 바운스 타이머를 구현하여 마지막 이벤트에서 150ms 이내에 발생하는 클릭을 필터링하여이 문제를 해결했습니다.

@atorger 님 , 어떻게 구현 하셨나요? onClick 이벤트 핸들러에서 event.originalEvent.preventDefault(); 시도했지만 성공하지 못했습니다. 최소한의 예를 공유 할 수 있습니까? 기도 미소

확실한:

var lastClick = Date.now();
e.addEventListener('click', function(event) {
    var now = Date.now();
    var diff = now - lastClick;
    lastClick = now;
    event.stopPropagation();
    if (diff > 150) {
        // handle the click event
    }
});

이 문제로 인해 bindPopup 가 마커와 함께 작동하지 않습니다.

• 버전 1.7.1 : https://jsfiddle.net/danmichaelo/gnds7a8o/15/ 마커를 클릭해도 아무 일도 일어나지 않습니다.
• master : 다시 예상대로 작동합니다 🎉 https://jsfiddle.net/danmichaelo/gnds7a8o/16/

나는 파이어 폭스 (및 모바일 사파리) 에서도이 문제에 직면했습니다. 나는 그것을 안정적으로 재현 할 수 없었지만 탭 옵션에서 나온 힌트는 모바일 사파리에서도 팝업을 여는 데 필요하지 않기 때문에 탭을 완전히 비활성화하는 솔루션으로 이어졌습니다.

var map = L.map('map', { "tap": false });

나는 파이어 폭스 (및 모바일 사파리) 에서도이 문제에 직면했습니다. 나는 그것을 안정적으로 재현 할 수 없었지만 탭 옵션에서 나온 힌트는 모바일 사파리에서도 팝업을 여는 데 필요하지 않기 때문에 탭을 완전히 비활성화하는 솔루션으로 이어졌습니다.

var map = L.map('map', { "tap": false });

이 솔루션에 감사드립니다, @eikes! 나는 오늘이 문제를 만났고 그것이 해결되었습니다.

모바일 사파리에서도 팝업을 여는 데 필요하지 않습니다.

모바일 사파리에서 tap 핸들러는 탭 홀드에서 contextmenu 이벤트를 시뮬레이션하는 데 필요합니다.

이 버그는 모바일 장치에서지도를 클릭하려고 할 때 두 번의 터치를 발생시킵니다.