js에서 쉽게 발생하는 호환성 및 오류가 발생하기 쉬운 문제

아래 편집자는 js의 일부 호환성과 오류가 발생하기 쉬운 문제를 요약한 기사를 공유할 것입니다. 이 기사는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터를 따라가며 함께 살펴볼까요

1. 속성 관련

보통 속성과 속성을 속성이라고 부르는데 실제로는 다른 개념입니다.

특성 HTML 텍스트에 표시됩니다. 특성은 요소의 외부 HTML에 확실히 나타나며 특성은 요소 노드에만 존재합니다.

속성(속성)은 브라우저에 내장된 일부 기능을 제외하고 JS 개체를 수정합니다. 다른 특성 작업은 영향을 받지 않습니다. HTML 텍스트.

1. IE6/7은 속성과 특성을 구분하지 않습니다.

다른 브라우저는 속성과 특성을 구분하지만 IE67에서는 속성 이름을 사용하여 특성을 삭제할 수만 있습니다. 이름은 동일한 경우가 많지만 항상 차이가 있습니다.

2. IE6/7은 값이 문자열이 아닌 기능을 작동하기 위해 getAttribute/setAttribute를 사용할 수 없습니다.

최신 브라우저에서 getAttribute는 확실히 HTML에서 해당 문자열을 반환하며 IE67에서 반환된 결과는 예측할 수 없습니다. IE67에서는 속성을 조작하려면 AttributeNode를 사용해야 합니다.

3. IE6/7/8은 스타일 속성을 통해 CSS 텍스트를 얻을 수 없습니다.

이 문제는 IE6/7이 스타일 속성을 얻을 때 속성과 특성을 구분하지 않기 때문에 발생합니다. 괜찮은.

4. IE6/7은 상대 URL을 절대 URL로 구문 분석합니다.

이 문제로 인해 IE6/7에서 빈 src 속성이 반복되는 요청을 생성할 수도 있습니다.

5. 요소 특성의 기본 동작이 다릅니다

이 유형의 버그가 더 많이 있습니다. 예를 들어 일부 오래된 웹킷 브라우저에서는 체크박스/라디오의 기본값이 켜져 있지 않고 ""입니다. 일부 이전 웹킷 브라우저에서는 선택 항목의 첫 번째 요소가 선택되지 않습니다.

2. 스타일 작업

일반적으로 스타일에는 인라인 스타일 가져오기 및 설정과 요소의 계산된 스타일 가져오기가 포함됩니다.

1 IE는 background-position-x/y를 지원하지만 다른 브라우저는 지원하지 않습니다.

배경 위치-x/y를 사용하면 이미지 위치를 편리하게 그라데이션할 수 있습니다. 지원되지 않는 경우 구문 분석 배경 위치 속성을 사용하여 처리할 수 있습니다.

2. IE6/7은 불투명도 속성을 지원하지 않습니다

알파 필터를 통해 동일한 효과를 얻을 수 있지만 요소의 해시 레이아웃을 트리거하는 것을 기억하세요.

3. IE6/7/8은 실수로 복제에 의해 생성된 노드가 일부 속성을 상속하도록 허용합니다.

예를 들어 배경을 한두 개 수정하면 동시에 변경됩니다.

4. 계산된 스타일을 얻는 다양한 방법

IE6/7/8은 elem.currentStyle을 사용하는 반면 다른 브라우저는 window.getCompulatedStyle 함수를 사용합니다.

5. 다양한 픽셀화 방법

픽셀화는 계산을 용이하게 하기 위해 단위가 픽셀이 아닌 거리를 픽셀로 변환하는 것을 의미합니다. 엄밀히 말하면 이는 호환성 문제는 아니지만 전반적으로 사용될 수 있습니다. IE6/7/8에서는 처리를 위해 pixelLeft와 함께 elem.runtimeStyle을 사용할 수 있습니다.

최신 브라우저는 너비 속성을 사용할 수 있습니다.

6. CSS를 얻을 때 일부 BUG 동작

Webkti 핵심 브라우저에서는 margin-right가 종종 잘못됩니다.

3. 쿼리 연산

쿼리 전달이란 몇 가지 특성 문자열을 통해 요소 집합을 찾거나 요소가 문자열을 만족하는지 판단하는 것을 의미합니다.

1. IE6/7은 id와 name을 구분하지 않습니다

IE6/7에서 getElementById와 getElementsByName을 사용하면 주어진 값과 동일한 id나 이름을 가진 요소가 동시에 반환됩니다. 이름은 일반적으로 백엔드에서 합의되므로 JS를 작성할 때 ID가 이름과 중복되지 않도록 해야 합니다.

2. IE6/7은 getElementsByClassName 및 querySelectorAll을 지원하지 않습니다

이 두 기능은 IE8에서 지원되므로 IE6/7에서는 실제로 getElementByTagName만 사용할 수 있습니다.

3. IE6/7은 getElementsByTagName('*')을 지원하지 않으며 요소가 아닌 노드를 반환합니다.

*를 사용하지 않거나 직접 필터링하는 함수를 작성하세요.

4. IE8의 querySelectorAll은 속성 선택기에 적합하지 않습니다

거의 모든 브라우저 사전 정의 속성에 문제가 있습니다. 맞춤 속성을 사용하거나 속성 선택기를 사용하지 마세요.

5. querySelectorAll은 IE8에서 의사 클래스를 지원하지 않습니다

때때로 의사 클래스가 매우 유용하지만 IE8은 이를 지원하지 않습니다: first, :last, :even, :odd, :eq, : n번째, :lt 및 :gt는 의사 클래스가 아니므로 언제든지 사용해서는 안 됩니다.

6. IE9의 match 함수는 DOM 트리에 없는 요소를 처리할 수 없습니다.

요소가 DOM 트리에 없는 한 반드시 false를 반환합니다. 물론 우리는 리플로우를 피하기 위해 자신만의 매칭 함수를 작성할 수도 있습니다.

4. 이벤트 운영

보통 사람들이 JS의 호환성에 대해 물을 때 가장 먼저 반응하는 것은 AttachEvent와 addEventListener이지만, 이 두 기능의 차이점에 대해서는 여전히 많은 세부 사항이 있습니다.

1. 이벤트 액션 개체가 다릅니다

addEventListener는 이벤트가 발생하는 현재 개체이고, attachmentEvent는 창입니다.

.이벤트 매개변수 개체가 다릅니다.

attachEvent에 바인딩된 함수에는 e = e || 이벤트라고 쓰지 마세요. 그러나 둘 사이에는 버튼과 같은 매개변수 속성에 많은 차이가 있습니다. 또는 마녀 지원 페이지Y 등은 지원되지 않습니다.

2. 사악한 휠 이벤트

휠 이벤트에 대한 지원은 엉망이며 규칙은 다음과 같습니다.
IE6-11 크롬 마우스휠 휠Detla down-120 up 120

firefox DOMMouseScroll 세부 사항 아래로 3 up-3

firefox 휠 detlaY Next 3 Up -3

IE9-11 휠 deltaY Down 40 Up -40

chrome 휠 deltaY Down 100 Up -100

3 세 가지 주요 버블링 방지 이벤트

모든 브라우저의 초점/ 블러 이벤트는 버블링이 없습니다. 다행스럽게도 대부분의 브라우저는 focusin/focusout 이벤트를 지원하지만 빌어먹을 Firefox는 이를 지원하지도 않습니다.

IE678에서는 제출 이벤트가 발생하지 않습니다.

IE678에서는 블러가 발생할 때까지 변경 이벤트가 실행되지 않습니다.

그리고 우리는 이 세 가지 문제를 해결할 효과적인 수단이 없으며 시뮬레이션 트리거를 통해서만 해결할 수 있습니다.

4.a.click()

이 방법은 많은 브라우저에서 안전하지 않습니다. 일단 실행되면 기본 동작이 차단되더라도 페이지는 계속 이동합니다.

5. 노드 운영

노드 운영이란 일반적으로 노드를 복사하거나 생성하거나 노드의 위치를 ​​이동하는 것을 말합니다.

1..innerHTML

IE6/7/8에서 innerHTML을 사용할 때 앞에 텍스트 노드가 있어야 합니다. 그렇지 않으면 많은 태그가 손실됩니다. 또한 대부분의 경우 innerHTML을 사용하면 defaultValue 속성에 오류가 발생합니다.

2. 쓸모없는 tbody

IE6/7/8은 빈 테이블에 빈 tbody를 자동으로 추가합니다

3. cloneNode가 AttachEvent 이벤트를 복사할 때

. 그렇지 않으면 그것들을 풀 수 없을 것이다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Vue.js의 재귀 구성 요소를 통해 트리 메뉴를 만드는 방법

PHP에서 JSONAPI를 사용하는 방법

Parcel.js + Vue 2.x에서 매우 빠른 0을 달성하는 방법 구성 패키징

Vue

fastclick 코드에서 "클릭 연결" 탭을 해결하는 방법

위 내용은 js에서 쉽게 발생하는 호환성 및 오류가 발생하기 쉬운 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!