JavaScript 'animate' 기능이 Chrome에서는 작동하지 않지만 IE에서는 작동하는 이유는 무엇입니까?

JS 함수 animate가 Chrome에서는 작동하지 않지만 IE에서는 작동합니다.

제공된 JavaScript 함수 animate가 Chrome에서는 작동하지 않지만 Internet Explorer에서는 예상대로 작동합니다. . 이 문제를 해결하려면 이벤트 핸들러 콘텐츠 속성을 사용할 때 발생하는 제약 조건과 잠재적인 충돌을 자세히 조사해야 합니다.

문제의 핵심은 Element.prototype에 의한 전역 함수 window.animate의 그림자에서 비롯됩니다. .생기 있게 하다. 웹 애니메이션에 도입된 이 새로운 기능은 요소 인터페이스를 확장하여 다음과 같은 방식으로 요소에서 직접 애니메이션을 활성화합니다.

elem.animate({ color: 'red' }, 2000);

콘텐츠 속성을 사용하여 이벤트를 처리할 때 대상 요소의 범위가 전역 범위를 재정의합니다. . 따라서 함수 이름 animate가 새로운 메서드 Element.animate와 충돌합니다.

이 문제를 해결하려면 두 가지 가능한 접근 방식이 있습니다.

1. 함수 이름 바꾸기:

함수 이름을 변경하면 충돌을 피할 수 있습니다. 요소.프로토타입.애니메이트. 예를 들어 다음을 사용할 수 있습니다.

function animate__() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

2. 적용 방법 사용:

또는 적용 방법을 사용하여 명시적으로 지정할 수 있습니다. 애니메이션 기능의 올바른 범위. 이 접근 방식은 animate라는 이름을 유지해야 하는 경우 특히 유용합니다.

다음과 같이 코드를 수정합니다.

document.getElementById('demo').onclick = function() {
  animate.apply(document.getElementById('demo'));
};

이 줄은 전역 animate 함수가 트리거될 때 전역 animate 함수에 올바른 범위를 적용합니다. onclick 이벤트입니다.

위 내용은 JavaScript 'animate' 기능이 Chrome에서는 작동하지 않지만 IE에서는 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!