Voyons quels problèmes se produiront lorsque la traînée précédente est là quand quelque chose autour de lui? Il n'y aura aucun problème dans les navigateurs avancés. Tessons-le dans IE7 et le problème sortira. Comme indiqué
Nous pouvons clairement voir que le texte a été sélectionné. Ensuite, cette expérience utilisateur est très mauvaise et elle n'est pas pratique à utiliser. Soit dit en passant, nous avons ajouté un rendement faux avant; nous a aidés à résoudre de nombreux problèmes. Si nous supprimons cela, le même problème se produira dans Chrome. C'est donc dire que ce retour est faux; Peut résoudre les problèmes des navigateurs Chrome FF IE9 +.
En fait, dans notre développement, il y a de nombreux éléments sur la page, et il est impossible d'avoir une seule div. D'autres endroits ne seront pas sélectionnés lorsque vous faites glisser, comme la carte Baidu, vous pouvez jouer avec.
Alors, comment faire une telle traînée? Peut-il résoudre le problème IE7?
Solution:
Nous pouvons utiliser une petite astuce pour le résoudre. Cette astuce ne peut être prise en charge que dans IE6-8 et peut réellement résoudre notre problème, car d'autres navigateurs utilisent Return False; Voyons quelles sont les astuces
C'est la capture d'événements! ! Joignez le code à la brève description
<Title> </ Title> <Script Type = "Text / JavaScript"> Window.onLoad = function () {var obtn = document.getElementById ("btn"); obtn.onclick = function () {alert (1); }; // Les événements sur tous les endroits de la page Web sont concentrés sur un bouton, c'est-à-dire obtn.setCapture dédié (); // partout où vous cliquez, vous faites éclater un} </ script> </ head> <body> <entrée type = "bouton" id = "btn" value = "bouton" /> </ body>En fait, les événements de tous les endroits de la page sont concentrés en un point, et un apparaît lors de la cliquetis sur n'importe quelle position de la page, qui est la fonction de setCapture ().
Collectez tous les événements sur un bouton pour gérer! ! Ce n'est que compatible avec IE! !
De cette façon, permettez-moi de voir comment modifier le code précédent. . . .
Tout d'abord, nous ramenons tous les documents à la div. Vous souvenez-vous que nous l'avons déjà dit parce que la souris traîne plus vite, il est facile de traîner le div, donc nous ajoutons tous les événements au document.
Et maintenant, il n'est pas nécessaire de le faire, ajoutez un setCapture () à notre div précédent pour voir l'effet.
<body> Le texte dans IE 7 sera sélectionné. <br /> Si vous n'ajoutez pas de retour false chrome ff, il y aura un tel problème Asdsadad <br /> <div id = "div1"> Asdsadad Asdsadad Asdsadad </div>
<style type = "text / css"> # div1 {width: 200px; hauteur: 200px; Contexte: rouge; Position: absolue; } </ style> <script type = "text / javascript"> // glisser et déposer la div vide. La version basse de Firefox a Bug Window.onLoad = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; odiv.onmousemove = function (ev) {var oevent = ev || événement; var odIvleft = oevent.clientx - disx; var odIvtop = oevent.clienty - disy; odiv.style.left = odIvleft + 'px'; odiv.style.top = odivtop + 'px'; }; odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; }; odiv.setCapture (); retourne false; // bloque l'événement par défaut et résoudre le bug de firefox}; }; </cript>Pour le moment, nous n'avons en fait pas le problème de traîner la div lorsque nous le faisons glisser rapidement. En fait, après l'ajout de setCapture (), tous les événements sur toute la page Web seront rassemblés sur cette div.
En fait, ce texte ne sera pas sélectionné maintenant. Pourquoi? Parce que tous les événements du texte et des images sont maintenant sur la div, ils ne peuvent plus obtenir les événements! Donc, naturellement, ils ne seront pas sélectionnés.
Bien sûr, il y a un autre problème maintenant? ? ? ? Vous constaterez que lorsque vous essayez de sélectionner ces mots, vous ne serez pas sélectionné.
Que dois-je faire? Tous les événements sont concentrés sur la div. . . !!!!!!
Ainsi, en fait, ce setCapture () est comme une serrure. Maintenant, il est verrouillé et les événements sont tous sur la div. Maintenant, il est normal de le déverrouiller. Celui correspondant est Releascapture ();
releascapture (); est de libérer la capture. En fait, ajoutez-le simplement lorsque la souris est soulevée.
window.onload = function () {var odiv = document.getElementyid ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; odiv.onmousemove = function (ev) {var oevent = ev || événement; var odIvleft = oevent.clientx - disx; var odIvtop = oevent.clienty - disy; odiv.style.left = odIvleft + 'px'; odiv.style.top = odivtop + 'px'; }; odiv.onmouseup = function () {odiv.onmousemove = null; odiv.onmouseup = null; odiv.releSeaCapture (); }; odiv.setCapture (); retourne false; // bloque l'événement par défaut et résoudre le bug de firefox}; };Nous pouvons maintenant résoudre le problème de la sélection de texte. Enfin, nous nous asseyons et compatibles. En fait, ce setCapture () est incompatible et il est mal de le mettre dans d'autres navigateurs.
C'est très simple. Nous avons juste besoin de fusionner les codes de celle et du dernier. Faites simplement un jugement si le jugement est compatible. Enfin, le code organisé est joint
<script type = "text / javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; if (odiv.setCapture) {odiv.onmousemove = mousmove; odiv.onmouseup = sourisup; odiv.setCapture (); // IE 7 Le texte suivant ne sera pas sélectionné, c'est en fait le texte ou l'image qui ne peut pas être obtenu.} Else {document.onMouseMove = MouseMove; document.onmouseup = sourisup; } fonction mousmove (ev) {var oevent = ev || événement; var odIvleft = oevent.clientx - disx; var odIvtop = oevent.clienty - disy; odiv.style.left = odIvleft + 'px'; odiv.style.top = odivtop + 'px'; } fonction sourisup (ev) {this.onMouSemove = null; this.onmouseup = null; if (odiv.releSeaCapture) {odiv.releSeaCapture (); // Release capture}} return false; // bloque l'événement par défaut et résoudre le bug de firefox}; }; </cript>D'accord, tout est fait o (∩_∩) o haha ~