내 'animate' 기능이 IE에서는 작동하지만 Chrome에서는 작동하지 않는 이유: JavaScript 섀도잉 문제?

<p>

JS 함수 'Animate'가 Chrome에서는 실패하지만 IE에서는 성공: 섀도잉 문제 해결

문제 설명

<p>인라인 함수가 포함된 onClick 이벤트 요소의 스타일을 변경하도록 설계된 'animate'라는 이름은 Chrome에서는 실패하지만 IE에서는 의도한 대로 작동합니다. 'animate' 함수 내에서 호출되는 코드는 JavaScript를 사용하여 요소의 위치와 색상을 수정하는 것을 목표로 합니다.

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

#demo {
  position: absolute;
}

<p>

해결 방법 및 설명

<p>문제는 JavaScript의 범위에 있습니다. 체인 및 섀도잉 메커니즘. 인라인 이벤트 핸들러 속성(예: onclick)을 활용하면 최근 도입된 Web Animations API에서 파생된 'Element.prototype.animate' 메서드에 의해 전역 함수 'animate'가 모호해집니다.

window.animate // global function

Element.prototype.animate // element's own method

<p>DOM 사양에 따르면 전역 이벤트 핸들러 환경은 이벤트 처리 중에 요소의 범위를 숨깁니다. 따라서 요소의 'animate' 방법은 전역 'animate' 기능보다 우선합니다.

10. Let the current event handler value be the result of the following steps:
    ...
    4. Let the target environment be the lexical environment scope.
    ...
    6. If the element is non-null, then
        a. Let the target environment be the result of NewObjectEnvironment(the element, the target environment).

<p>이를 수정하려면 다음과 같은 여러 접근 방식을 사용할 수 있습니다.

1. 전역 함수:

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

2. 전역 함수를 대상에 바인딩 요소:

document.getElementById('demo').addEventListener('click', animate.bind(document.getElementById('demo')));

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