Mal sehen, welche Probleme auftreten werden, wenn das vorherige Ziehen vorhanden ist, wenn etwas um es herum ist? In fortgeschrittenen Browsern wird es kein Problem geben. Testen wir es in IE7 und das Problem wird herauskommen. Wie gezeigt
Wir können deutlich sehen, dass der Text ausgewählt wurde. Dann ist diese Benutzererfahrung sehr schlecht und es ist nicht bequem zu bedienen. Übrigens haben wir vorher eine Rückgabe falsch hinzugefügt; half uns, viele Probleme zu lösen. Wenn wir dies entfernen, tritt das gleiche Problem in Chrom auf. Das heißt also, diese Rückkehr falsch; Kann die Probleme von Chrom ff IE9+ Browsern lösen.
Tatsächlich gibt es in unserer Entwicklung viele Elemente auf der Seite, und es ist unmöglich, nur eine DIV zu haben. Andere Orte werden nicht ausgewählt, wenn Sie ziehen, z. B. Baidu Map, Sie können damit spielen.
Wie machen wir so einen Zug? Kann es das IE7 -Problem lösen?
Lösung:
Wir können einen kleinen Trick verwenden, um ihn zu lösen. Dieser Trick kann nur in IE6-8 unterstützt und unser Problem tatsächlich lösen, da andere Browser Return Falsch verwenden. Mal sehen, was die Tricks sind
Es ist Event Capture! ! Fügen Sie den Code an die kurze Beschreibung bei
<title> </title> <script type = "text/javaScript"> window.onload = function () {var obtn = document.getElementById ("btn"); obtn.onclick = function () {alert (1); }; // Ereignisse auf allen Stellen auf der Webseite konzentrieren sich auf eine Schaltfläche, dh dedizierte obtn.setCapture (); // wo immer Sie klicken, Sie packen Sie eine} </script> </head> <body> <Eingabe type = "button" id = "btn" value = "button"/> </body>Tatsächlich sind die Ereignisse auf allen Stellen auf der Seite an einem Punkt konzentriert, und beim Klicken auf eine Position der Seite, die die Funktion von setCapture () ist.
Sammeln Sie alle Ereignisse mit einem Taste, um sie zu handhaben! ! Dies ist nur mit IE kompatibel! !
Lassen Sie mich auf diese Weise sehen, wie der vorherige Code geändert wird. . . .
Erstens ändern wir alle Dokumente zurück in die Div. Erinnerst du dich, dass wir vorher gesagt haben, weil die Maus schneller zieht, es einfach ist, die DIV herauszuziehen, also fügen wir alle Ereignisse zum Dokument hinzu.
Und jetzt müssen Sie dies nicht tun. Fügen Sie unserem vorherigen Div eine SetCapture () hinzu, um den Effekt zu erkennen.
<Body> Der Text in IE 7 wird ausgewählt. <BR /> Wenn Sie keine Rückgabe falsch Chrome FF hinzufügen, wird es ein solches Problem geben, das Asdsadad <br /> <div1 = "div1"> asdsadad Asdsadad Asdsadad < /div> asdsdadasdsdadad < /body> gibt
<style type = "text/css"> #div1 {width: 200px; Höhe: 200px; Hintergrund: Rot; Position: absolut; } </style> <skript type = "text/javaScript"> // leere Divation ziehen und fallen lassen. Niedrige Version von Firefox hat ein Fehlerfenster.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || Ereignis; 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 (); false zurückgeben; // Blockieren Sie das Standard -Ereignis und beheben Sie den Firefox -Fehler}; }; </script>Zu diesem Zeitpunkt haben wir eigentlich nicht das Problem, die DIV herauszuziehen, wenn wir es schnell ziehen. Nach dem Hinzufügen von setCapture () werden alle Ereignisse auf der gesamten Webseite auf dieser Div gesammelt.
Tatsächlich wird dieser Text jetzt nicht ausgewählt. Warum? Weil alle Ereignisse im Text und in den Bildern jetzt auf der DIV sind, können sie die Ereignisse nicht mehr bekommen! Natürlich werden sie natürlich nicht ausgewählt.
Natürlich gibt es jetzt ein anderes Problem? ? ? ? Sie werden feststellen, dass Sie, wenn Sie versuchen, diese Wörter auszuwählen, nicht ausgewählt werden.
Was soll ich tun? Alle Ereignisse konzentrieren sich auf die Div. . . !!!!!!
Tatsächlich ist diese setCapture () wie ein Schloss. Jetzt ist es verschlossen und die Ereignisse sind alle auf der Div. Jetzt ist es in Ordnung, es freizuschalten. Der entsprechende ist releascapture ();
releascapture (); ist die Erfassung freizusetzen. Fügen Sie es einfach hinzu, wenn die Maus erhöht wird.
window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || Ereignis; 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.releascapture (); }; odiv.setcapture (); false zurückgeben; // Blockieren Sie das Standard -Ereignis und beheben Sie den Firefox -Fehler}; };Jetzt können wir das Problem der Textauswahl lösen. Schließlich setzen wir uns hin und kompatibel. Tatsächlich ist diese setCapture () unvereinbar und es ist falsch, sie in andere Browser zu setzen.
Das ist sehr einfach. Wir müssen nur die Codes aus diesem und dem letzten verschmelzen. Machen Sie einfach ein IF -Urteilsvergleich. Schließlich ist der organisierte Code beigefügt
<script type = "text/javaScript"> fenws.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; if (odiv.setcapture) {odiv.onmousemove = mousemove; odiv.onmouseUp = mauseup; odiv.setcapture (); // dh 7 Der folgende Text wird nicht ausgewählt, es ist tatsächlich der Text oder das Bild, das nicht erhalten werden kann.} Else {document.onmousEmove = MousEmove; document.onmouseUp = mauseup; } Funktion Mousemove (ev) {var oevent = ev || Ereignis; var odivleft = oevent.clientX - disx; var odivtop = oevent.clienty - Disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; } function Mauseup (ev) {this.onmousemove = null; this.onmouseUp = null; if (odiv.releascapture) {odiv.releascapture (); // Capture veröffentlichen}} return false; // Blockieren Sie das Standard -Ereignis und beheben Sie den Firefox -Fehler}; }; </script>Okay, alles wird o (∩__∩) o haha ~ gemacht