Analisis ringkas tentang isu keserasian penyemak imbas dalam kemahiran JavaScript_javascript

Isu keserasian penyemak imbas mudah diabaikan tetapi bahagian paling penting dalam pembangunan sebenar. Sebelum kita bercakap tentang isu keserasian dengan versi penyemak imbas yang lebih lama, kita mesti memahami terlebih dahulu apakah pengesanan keupayaan Ia digunakan untuk mengesan sama ada penyemak imbas mempunyai keupayaan ini, iaitu, untuk menentukan sama ada penyemak imbas semasa menyokong atribut atau kaedah. dipanggil. Di bawah adalah beberapa pengenalan ringkas.

1.Teks dalaman dan Kandungan dalaman
1) innerText dan innerContent mempunyai fungsi yang sama
2) innerText disokong oleh pelayar sebelum IE8
3) innerContent disokong oleh versi Firefox yang lebih lama
4) Versi baharu penyemak imbas menyokong kedua-dua kaedah

1 // 老版本浏览器兼容 innerText 和 innerContent
2 if (element.textContent) {
3    return element.textContent ;
4  } else {
5    return element.innerText;
6  }

2. Isu keserasian dalam mendapatkan nod/elemen adik beradik
1) Nod saudara, semua pelayar menyokong
①nextSibling Nod adik beradik seterusnya mungkin nod bukan elemen; nod teks
akan diperolehi ②previousSibling Nod adik beradik sebelumnya mungkin nod bukan elemen; nod teks
akan diperolehi 2) Elemen saudara, IE8 tidak menyokongnya sebelum ini

①previousElementSibling Mendapat elemen adik beradik sebelumnya dan mengabaikan ruang kosong
②NEXTELEMENTSIBLING untuk mendapatkan elemen abang jiran seterusnya, ia akan mengabaikan kosong

//兼容浏览器
// 获取下一个紧邻的兄弟元素
function getNextElement(element) {
  // 能力检测
 if(element.nextElementSibling) {
   return element.nextElementSibling;
  } else {
     var node = element.nextSibling;
     while(node && node.nodeType !== 1) {
         node = node.nextibling;
     }
     return node;
  }
 }

/**
* 返回上一个元素
* @param element
* @returns {*}
*/
function getPreviousElement(element) {
  if(element.previousElementSibling) {
    return element.previousElementSibling;
  }else {
    var el = element.previousSibling;
    while(el && el.nodeType !== 1) {
      el = el.previousSibling;
      }
    return el;
  }
}

/**
* 返回第一个元素firstElementChild的浏览器兼容
* @param parent
* @returns {*}
*/
function getFirstElement(parent) {
  if(parent.firstElementChild) {
    return parent.firstElementChild;
  }else {
    var el = parent.firstChild;
    while(el && el.nodeType !== 1) {
      el = el.nextSibling;
      }
    return el;
  }
}

/**
* 返回最后一个元素
* @param parent
* @returns {*}
*/
function getLastElement(parent) {
  if(parent.lastElementChild) {
    return parent.lastElementChild;
  }else {
    var el = parent.lastChild;
    while(el && el.nodeType !== 1) {
      el = el.previousSibling;
      }
    return el;
  }
}

/**
*获取当前元素的所有兄弟元素
* @param element
* @returns {Array}
*/
function sibling(element) {
  if(!element) return ;
  
  var elements = [ ];
  var el = element.previousSibling;
  while(el) {
    if(el.nodeType === 1) {
      elements.push(el);
    }
    el = el.previousSibling;
  }
   el = element.previousSibling;
   while(el ) {
    if(el.nodeType === 1) {
      elements.push(el);
    }
    el = el.nextSibling;
  }
    return elements;
}

3 // Uji semua elemen menggunakan fungsi yang ditentukan dan buat tatasusunan baharu yang mengandungi semua elemen yang lulus ujian

// 兼容旧环境
if (!Array.prototype.filter)
{
 Array.prototype.filter = function(fun /*, thisArg */)
 {
  "use strict";
  if (this === void 0 || this === null)
   throw new TypeError();
  var t = Object(this);
  var len = t.length >>> 0;
  if (typeof fun !== "function")
   throw new TypeError();
  var res = [];
  var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
  for (var i = 0; i < len; i++)
  {
   if (i in t)
   {
    var val = t[i];
    // NOTE: Technically this should Object.defineProperty at
    //    the next index, as push can be affected by
    //    properties on Object.prototype and Array.prototype.
    //    But that method's new, and collisions should be
    //    rare, so use the more-compatible alternative.
    if (fun.call(thisArg, val, i, t))
     res.push(val);
   }
  }
  return res;
 };
}

4. array.forEach();

// Lintas tatasusunan

//兼容旧环境
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {
 Array.prototype.forEach = function(callback, thisArg) {
  var T, k;
  if (this == null) {
   throw new TypeError(' this is null or not defined');
  }
  // 1. Let O be the result of calling toObject() passing the
  // |this| value as the argument.
  var O = Object(this);
  // 2. Let lenValue be the result of calling the Get() internal
  // method of O with the argument "length".
  // 3. Let len be toUint32(lenValue).
  var len = O.length >>> 0;
  // 4. If isCallable(callback) is false, throw a TypeError
  exception. // See: http://es5.github.com/#x9.11
  if (typeof callback !== "function") {
   throw new TypeError(callback + ' is not a function');
  }
  // 5. If thisArg was supplied, let T be thisArg; else let
  // T be undefined.
  if (arguments.length > 1) {
   T = thisArg;
  }
  // 6. Let k be 0
  k = 0;
  // 7. Repeat, while k < len
  while (k < len) {
   var kValue;
   // a. Let Pk be ToString(k).
   //  This is implicit for LHS operands of the in operator
   // b. Let kPresent be the result of calling the HasProperty
   //  internal method of O with argument Pk.
   //  This step can be combined with c
   // c. If kPresent is true, then
   if (k in O) {
    // i. Let kValue be the result of calling the Get internal
    // method of O with argument Pk.
    kValue = O[k];
    // ii. Call the Call internal method of callback with T as
    // the this value and argument list containing kValue, k, and O.
    callback.call(T, kValue, k, O);
   }
   // d. Increase k by 1.
   k++;
  }
  // 8. return undefined
 };
}

5. Acara pendaftaran

.addEventListener = fungsi (jenis,pendengar,useCapture ) { }; //Nama peristiwa parameter pertama
//Fungsi pengendalian peristiwa parameter kedua (pendengar)
//Parameter ketiga benar menangkap gelembung palsu
//Hanya disokong selepas IE9
// Serasi dengan persekitaran lama

var EventTools = {
    addEventListener: function (element, eventName, listener) {
      //能力检测
      if(element.addEventListener) {
        element.addEventListener(eventName, listener,false);
      }else if(element.attachEvent) {
        element.attachEvent("on" + eventName, listener);
      }else{
        element["on" + eventName] = listener;
      }
    },

//  想要移除事件，不能使用匿名函数
    removeEventListener: function (element, eventName, listener) {
      if(element.removeEventListener) {
        element.removeEventListener(eventName,listener,false);
      }else if(element.detachEvent) { //IE8以前注册.attachEvent和移除事件.detachEvent
        element.detachEvent("on"+eventName,listener);
      }else{
        element["on" + eventName] = null;
      }
    }
  };

6. Objek acara

1) Parameter acara e ialah objek acara, kaedah pemerolehan standard

btn.onclick = fungsi(e) { }
2) fasa acara e.eventPhase, yang tidak disokong sebelum IE8
3)e.target sentiasa objek yang mencetuskan acara (butang yang diklik)
i) Sebelum IE8 srcElement
ii) Penyemak imbas serasi
var target = e.target ||. window.event.srcElement;

// 获取事件对象 兼容浏览器
 getEvent: function(e) {
  return e || window.event; // e事件对象 标准的获取方式； window.event IE8以前获取事件对象的方式
 }
// 兼容target
 getTarget: function(e) {
  return e.target || e.srcElement;
 }

7. Dapatkan kedudukan tetikus pada halaman

①Kedudukan dalam kawasan yang boleh dilihat: e.clientX e.clientY

②Kedudukan dalam dokumen:
i) e.pageX e.pageY
ii) Penyemak imbas serasi

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var pageY = e.clientY + scrollTop;

8. Dapatkan jarak tatal halaman

 // 兼容浏览器
 var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;

9. Batalkan pemilihan teks

// 兼容浏览器
 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

[Ringkasan] Ini hanyalah sebahagian ringkasan Dalam pembangunan sebenar, pelbagai isu keserasian penyemak imbas juga akan dihadapi. Pelayar yang berbeza juga akan menghadapi masalah penyesuaian yang berbeza pada PC dan telefon mudah alih

Analisis ringkas mengenai isu keserasian penyemak imbas dalam JavaScript di atas adalah semua kandungan yang dikongsi oleh editor. Saya harap ia boleh memberi anda rujukan dan saya harap anda akan menyokong Script Home.