Maison interface Web js tutoriel Résumé des méthodes d'écriture de compatibilité JS natives couramment utilisées_compétences Javascript

Résumé des méthodes d'écriture de compatibilité JS natives couramment utilisées_compétences Javascript

May 16, 2016 pm 03:03 PM

Résumons quelques choses simples

Remarques : les méthodes suivantes sont toutes encapsulées dans un objet EventUtil et la méthode est directement définie à l'aide de littéraux d'objet. . .

①Ajouter une méthode d'événement

1

2

3

4

5

6

7

8

9

addHandler:function(element,type,handler){

 if(element.addEventListener){//检测是否为DOM2级方法

  element.addEventListener(type, handler, false);

 }else if (element.attachEvent){//检测是否为IE级方法

  element.attachEvent("on" + type, handler);

 } else {//检测是否为DOM0级方法

  element["on" + type] = handler;

 }

}

Copier après la connexion

②Supprimer la méthode d'événement précédemment ajoutée

1

2

3

4

5

6

7

8

9

removeHandler:function(element, type, handler){

  if (element.removeEventListener){

   element.removeEventListener(type, handler, false);

  } else if (element.detachEvent){

   element.detachEvent("on" + type, handler);

  } else {

   element["on" + type] = null;

  }

 }

Copier après la connexion

③Obtenir des événements et des cibles d'objets d'événement

1

2

3

4

5

6

7

8

//获取事件对象的兼容性写法

 getEvent: function(event){

  return event ? event : window.event;

 },

 //获取事件对象目标的兼容性写法

 getTarget: function(event){

  return event.target || event.srcElement;

 }

Copier après la connexion

④Comment empêcher la compatibilité des événements par défaut du navigateur

1

2

3

4

5

6

7

preventDefault: function(event){

  if (event.preventDefault){

   event.preventDefault();

  } else {

   event.returnValue = false;

  }

 }

Copier après la connexion

⑤ Méthode d'écriture de compatibilité pour éviter les bulles d'événements

1

2

3

4

5

6

7

stopPropagation: function(event){

  if (event.stopPropagation){

   event.stopPropagation();

  } else {

   event.cancelBubble = true;

  }

 }

Copier après la connexion

⑥Les événements mouseover et mouseout incluent uniquement des méthodes pour obtenir les éléments associés

1

2

3

4

5

6

7

8

9

10

11

12

//mouseover和mouseout 事件才包含的获取相关元素的方法

getRelatedTarget: function(event){

 if (event.relatedTarget){

  return event.relatedTarget;

 } else if (event.toElement){

  return event.toElement;

 } else if (event.fromElement){

  return event.fromElement;

 } else {

  return null;

 }

}

Copier après la connexion

⑦Jugement de la molette de la souris

Pour les événements mousedown et mouseup, il y a un attribut bouton dans l'objet événement,
Représente un bouton enfoncé ou relâché. L'attribut du bouton DOM peut avoir les trois valeurs suivantes : 0 représente le bouton principal de la souris, 1 représente le bouton central de la souris
bouton (bouton de la molette de la souris), 2 représente le bouton secondaire de la souris. Dans une configuration standard, le bouton principal de la souris est le bouton gauche de la souris et le bouton secondaire de la souris est
Le bouton est le bouton droit de la souris.
IE8 et les versions précédentes fournissent également l'attribut bouton, mais la valeur de cet attribut est très différente de l'attribut bouton du DOM.
 0 : Indique que le bouton n'est pas enfoncé.
 1 : Indique que le bouton principal de la souris est enfoncé.
 2 : Indique que le bouton de la souris a été enfoncé.
 3 : Indique que les boutons principal et secondaire de la souris sont enfoncés en même temps.
 4 : Indique que le bouton central de la souris est enfoncé.
 5 : Indique que le bouton principal de la souris et le bouton central de la souris sont enfoncés en même temps.
 6 : Indique que le deuxième bouton de la souris et le bouton central de la souris sont enfoncés en même temps.
 7 : Indique que trois boutons de la souris ont été enfoncés simultanément.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

getButton: function(event){

 if (document.implementation.hasFeature("MouseEvents", "2.0")){

  return event.button;

 } else {

  switch(event.button){

   case 0:

   case 1:

   case 3:

   case 5:

   case 7:

   return 0;

   case 2:

   case 6:

   return 2;

   case 4:

   return 1;

  }

 }

}

Copier après la connexion

⑧Comment obtenir la valeur incrémentale (delta) de la molette de la souris

1

2

3

4

5

6

7

8

getWheelDelta: function(event){

 if (event.wheelDelta){

  return (client.engine.opera && client.engine.opera < 9.5 ?

   -event.wheelDelta : event.wheelDelta);

 } else {

  return -event.detail * 40;//firefox中的值为+3表示向上滚,-3表示向下滚

 }

}

Copier après la connexion

⑨Obtenez l'encodage des caractères de manière multi-navigateur

1

2

3

4

5

6

7

getCharCode: function(event){

 if (typeof event.charCode == "number"){

  return event.charCode;

 } else {

  return event.keyCode;

 }

}

Copier après la connexion

⑩ Accéder aux données dans le presse-papiers

1

2

3

4

getClipboardText: function(event){

  var clipboardData = (event.clipboardData || window.clipboardData);

  return clipboardData.getData("text");

 }

Copier après la connexion

11. Définissez les données dans le presse-papiers

1

2

3

4

5

6

7

setClipboardText: function(event, value){

  if (event.clipboardData){

   return event.clipboardData.setData("text/plain", value);

  } else if (window.clipboardData){

   return window.clipboardData.setData("text", value);

  }

 }

Copier après la connexion

Encapsulez-le puis utilisez-le directement.

Pour des fichiers complets et des styles de réinitialisation CSS et LESS plus basiques, voir : https://github.com/LuckyWinty/resetFile

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide jQuery Vérifiez si la date est valide Mar 01, 2025 am 08:51 AM

jQuery Vérifiez si la date est valide

jQuery obtient un rembourrage / marge d'élément jQuery obtient un rembourrage / marge d'élément Mar 01, 2025 am 08:53 AM

jQuery obtient un rembourrage / marge d'élément

10 onglets jQuery Accordion 10 onglets jQuery Accordion Mar 01, 2025 am 01:34 AM

10 onglets jQuery Accordion

10 vaut la peine de vérifier les plugins jQuery 10 vaut la peine de vérifier les plugins jQuery Mar 01, 2025 am 01:29 AM

10 vaut la peine de vérifier les plugins jQuery

Http débogage avec le nœud et le http-console Http débogage avec le nœud et le http-console Mar 01, 2025 am 01:37 AM

Http débogage avec le nœud et le http-console

jQuery Ajouter une barre de défilement à div jQuery Ajouter une barre de défilement à div Mar 01, 2025 am 01:30 AM

jQuery Ajouter une barre de défilement à div

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

See all articles