Panzoom: Panzoom은 최신 Chrome에서 하위 항목의 마우스 다운 이벤트를 숨깁니다.

크롬 v55 같은 문제가 있습니다. 드래그 가능한 창이 있는데 어린이를 위한 마우스다운 이벤트를 받고 싶습니다. 이 문제를 해결하기 위해 무엇을 하셨습니까? 변경 사항이 있는 지점이 있습니까? 지금은 막혀 있습니다.

당신의 지점을 찾았고 그것은 내 문제를 아주 훌륭하게 해결합니다. YuriGor 감사합니다 이것은 훌륭합니다

도와 줄 수있어서 기뻐!
필요하신 분들을 위해 다음 링크를 참조하세요.
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , 내 변경 사항을 병합하려면 grunt를 도와주세요.
나는 livereload를 시작한다
grunt watch:dev
하지만 작동하지 않습니다.
http://localhost :35711/에서
{"tinylr":"Welcome","version":"0.2.1"}
그리고 에
http://localhost :35711/test/index.html
또는
http://localhost :35711/demo/index.html
나는 가지고있다
{"error":"not_found","reason":"no such route"}

정말 감사합니다. 이 수정으로는 충분하지 않았지만 내 경우에 수정하기 위해 몇 가지를 추가했습니다. (나는 중첩된 자식이 여러 개 있는데 그 중 일부는 무시해야 하고 나머지는 무시해서는 안 됩니다.)

@timmywil 이 옵션으로 새 버전을 출시할 수 있나요?

편집 : 실제로 romi45와 동일한 문제가 있습니다. 😞

편집 2: 다음과 같이 무시할 요소를 나열하는 옵션이 유용합니다.

ignoreChildEventsFrom: [".things-to-ignore1", ".things-to-ignore2"]

편집 3: FAQ "링크가 Panzoom 요소 내에 있는 경우 어떻게 작동하게 합니까?"에서 솔루션을 찾은 것 같습니다.

내가 하는 일은 969행에서 preventDefault를 주석 처리하는 것입니다. preventDefault는 이벤트가 자식에 도달하지 못하도록 차단합니다.

@akhnaz ,

내 이해에서 preventDefault 는 요소(자식 또는 panzoom 요소 자체)와 관련된 기본 작업을 방지하고 stopPropagation 는 이벤트가 상위 요소로 버블링되는 것을 중지합니다.

FAQ에는 간단하고 우아한 솔루션이 있습니다.

1. 링크가 Panzoom 요소 내에 있는 경우 어떻게 작동합니까? 예시

• Panzoom 요소 내에서 Panzoom 요소를 허용하기 위해 mousedown 및 touchstart 이벤트에 대한 이벤트 전파가 중지됩니다. 링크를 수정하려면 이벤트가 Panzoom 핸들러에 도달하지 못하도록 하는 이벤트 핸들러를 바인딩합니다.

$('.panzoom a').on('mousedown touchstart', function( e ) {
  e.stopImmediatePropagation();
});

이를 위해서는 라이브러리 자체를 변경할 필요가 없습니다.

안녕하세요 @glen-84

예, preventDefault는 기본 작업을 방지합니다. 그러나 pointerDown이 전달되고 수신될 때 자식의 mouseDown도 방지합니다.

크롬 55에서는 이제 pointerDown이 디스패치되고 microsoft edge는 이미 처음부터 pointerDown을 구현하고 있습니다.

제 경우 panzoom은 pointerDown을 듣고 아이들은 mouseDown을 듣습니다.

여기에 내 jsbin이 있습니다.

https://jsbin.com/yozotuxina/edit?js

@akhnaz ,

아이에게 pointerdown 를 듣고 즉각적인 전파를 멈출 수 있습니다 ...

https://jsbin.com/sicapuledo/edit?html,js ,콘솔,출력

안녕하세요,

나는 당신의 기능을 약간 개선했습니다. 가능한 클래스 배열에 대한 옵션을 재정의합니다. 목표는 자식에게 나열된 클래스 중 하나가 있는 경우에만 이벤트를 무시하는 것입니다. 물론 값을 true로 설정하면 구현한 대로 작동합니다.

제대로 포크하고 풀 리퀘스트를 할 시간이 없습니다. 작은 개선 사항을 포함하고 기본 저장소로 가져오기를 요청하십시오.

다음은 포크 라인 959에서 업데이트된 코드입니다.

if (!options.disablePan || !options.disableZoom) {
    events[ str_start ] = function(e) {
        if(options.ignoreChildrensEvents) {
            if($.isArray(options.ignoreChildrensEvents)) {
                if(options.ignoreChildrensEvents.find(function(c){return $(e.target).hasClass(c);})) {
                    return;
                }
            }
            else if(e.target !== this){
                return;
            }
        }

        var touches;
                /* rest of code */

ignoreChildrensEvents 옵션은 true, false 또는 ['child-class1', 'child-class2']로 정의할 수 있습니다.

문안 인사

ignoreChildrensEvents가 포함된 최신 버전을 출시하십시오.