수동 이벤트 수신기 내부의 기본값을 방지할 수 없습니다.

수동 이벤트 수신기 내부의 기본값을 방지할 수 없습니다.

저는 Framework7 정렬 가능 목록을 사용하고 있는데 목록이 변경되어도 이벤트가 발생하지 않습니다.

그래서 몇 가지 기본 제공 이벤트를 시도하고 있습니다.

$('.sortable-handler').on('touchstart', function (e) {
    e.preventDefault();
    alert('touchstart');
});

$('.sortable-handler').on('touchmove', function (e) {
    e.preventDefault();
    console.log('touchmove');
});

$('.sortable-handler').on('touchcancel', function (e) {
    e.preventDefault();
    console.log('touchcancel');
});

$('.sortable-handler').mouseleave(function (e) {
    e.preventDefault();
    console.log('mouseleave');
});

하지만 내가 얻는 건:

대상이 패시브로 처리되어 패시브 이벤트 수신기 내부의 기본값을 방지할 수 없습니다.https://www.chromestatus.com/features/5093566007214080 을 참조하십시오.

모든 종류의 업데이트된 목록을 얻으려면 어떤 이벤트를 찾아야 합니까?

이 블로그 게시물을 참조하십시오.전화하시면preventDefault에 대하여touchstart그러면 당신은 또한 터치 스크롤을 비활성화하는 CSS 규칙이 있어야 합니다.

.sortable-handler {
  touch-action: none;
}

나를 위해.

document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false });

속임수를 썼습니다.{ passive: false }일부).

일반 JS 추가{ passive: false }세 번째 주장으로서

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
}, { passive: false });

사용자가 현재 정렬 요소를 새 위치에서 해제할 때 Framework7에서 정렬 가능 목록을 처리하려면 다음 코드를 사용할 수 있습니다.

  $$('li').on('sortable:sort',function(event){
    alert("From " + event.detail.startIndex + " to " + event.detail.newIndex);
  });

Fiddle : https://jsfiddle.net/0zf5w4y7/

부엉이 카루살을 사용하고 이미지를 스크롤할 때 이 문제가 발생합니다.

그러니 당신의 페이지에 아래의 CSS를 추가하는 것만으로 해결하세요.

.owl-carousel {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

또는

.owl-carousel {
-ms-touch-action: none;
touch-action: none;
}

전화하기 전에 확인만 하세요.preventDefault

event.cancelable && event.preventDefault()

바로 그거야!

추가:

touchstart & touchmove기본 패시브true성능 때문에 대부분의 경우 기본 최적화를 변경할 필요가 없습니다.

여전히 스크롤할 수 있는 것이 제게 효과가 있었습니다.

if (e.changedTouches.length > 1) e.preventDefault();

Rick Buyers의 답변에 추가

이 블로그 게시물을 참조하십시오.모든 터치 스타트에서 기본값 방지를 호출하는 경우 다음과 같이 터치 스크롤을 비활성화하는 CSS 규칙도 있어야 합니다.

.sortable-handler {
  touch-action: none;
}

Javascript로 실행하는 방법은 다음과 같습니다.

handlerList = document.getElementsByClassName("sortable-handler");
for (var i=0, len=handlerList.length|0; i<len; i=i+1|0) {
    handlerList[i].style.style.touchAction = "none";
}

여기 제 반응에 대한 해결책이 있습니다.이것은 휠과 함께 이동하는 동안 번호 변경을 유발하는 어리석은 반응 번호 텍스트 필드 스크롤 문제에 대한 것입니다.Default on Wheel 속성을 방지하려고 하면 "Passive Event Listener 내부의 기본값을 방지할 수 없습니다" 오류가 발생합니다.여기서 이벤트 수신기를 생성에 추가합니다.

export default function CustomTextField({ ...other }) {
  const ref = useRef(null);

  useEffect(() => {
    const element = ref.current;

    let isNumber = element.querySelector('input').type === 'number'
    if (isNumber) {
      element.addEventListener("wheel", handleWheel);
    }
  }, []);

  const handleWheel = (event) => {
    event.stopPropagation();
  };

  return (
        <TextField
          {...field}
          ref={ref}
          fullWidth
          value={typeof field.value === 'number' && field.value === 0 ? '' : field.value}
          error={!!error}
          helperText={error?.message}
          {...other}
        />

  );
}

저는 제 코드에 대한 다른 해결책을 생각해냈습니다.터치엔드 이벤트에 대한 패시브 속성을 비활성화해야 했습니다.저는 jquery 3.5를 사용했습니다.다음 코드를 사용할 수 있습니다.

jQuery.event.special.touchstart = {
        setup: function (_, ns, handle) {
            this.addEventListener('touchend', handle, { passive: !ns.includes('noPreventDefault') });
        }
    };

언급URL : https://stackoverflow.com/questions/42101723/unable-to-preventdefault-inside-passive-event-listener