前のドラッグが周囲に何かがあるときに何が起こるかを見てみましょう。高度なブラウザでは問題ありません。 IE7でテストしましょう。問題が発生します。示されているように
テキストが選択されていることがはっきりとわかります。その後、このユーザーエクスペリエンスは非常に悪く、使用するのが便利ではありません。ちなみに、私たちは以前にreturn falsを追加しました。多くの問題を解決するのに役立ちました。これを削除すると、同じ問題がChromeで発生します。つまり、これは偽りを返すことです。 Chrome FF IE9+ブラウザの問題を解決できます。
実際、私たちの開発では、ページには多くの要素があり、Divを1つしか持たないことは不可能です。 Baidu Mapなど、ドラッグすると他の場所は選択されません。それで遊ぶことができます。
それで、私たちはどのようにそのような抵抗をするのでしょうか? IE7の問題を解決できますか?
解決:
小さなトリックを使用して解決できます。このトリックはIE6-8でのみサポートでき、他のブラウザーがreturn falseを使用するため、実際に問題を解決できます。トリックが何であるか見てみましょう
イベントキャプチャです! !簡単な説明にコードを添付します
<title> </title> <script type = "text/javascript"> window.onload = function(){var obtn = document.getElementById( "btn"); obtn.onclick = function(){alert(1); }; // Webページのすべての場所のイベントは、ボタンに集中しています。 //クリックすると、[A} </script> </head> <body> <input type = "button" id = "btn" value = "button"/> </body>実際、ページ上のすべての場所のイベントはポイントに集中し、ページの任意の位置をクリックするとポップアップします。これはSetCapture()の機能です。
すべてのイベントを1つのボタンに収集して処理します! !これはIEとのみ互換性があります! !
このようにして、前のコードを変更する方法を見てみましょう。 。 。 。
まず、すべてのドキュメントをDivに戻します。マウスがより速くドラッグするので、Divをドラッグするのは簡単であるため、以前に言ったことを覚えていますか。そのため、すべてのイベントをドキュメントに追加します。
そして今、これを行う必要はありません。以前のdivにsetcapture()を追加して効果を確認します。
<body> IE 7のテキストが選択されます。 <br /> false false chrome ffを返しない場合、そのような問題がありますasdsadad <br /> <div id = "div1"> asdsadad asdsadad asdsadad < /div> asdsadadasdsdsadad < /body>
<style type = "text/css"> #div1 {width:200px;高さ:200px;背景:赤;位置:絶対; } </style> <script type = "text/javascript"> //空のdivをドラッグアンドドロップします。 Firefoxの低いバージョンにはbug window.onload = function(){var odiv = document.getElementbyId( "div1"); var disx = 0; var disy = 0; odiv.onmousedown = function(ev){var oevent = ev ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; odiv.onmousemove = function(ev){var oevent = ev ||イベント; 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を返します。 //デフォルトのイベントをブロックし、Firefoxのバグを解決します}; }; </script>現時点では、実際には、すぐにドラッグしたときにDivを引き出すという問題はありません。実際、setCapture()を追加した後、Webページ全体のすべてのイベントがこのDivに収集されます。
実際、このテキストは現在選択されていません。なぜ?テキストと写真のすべてのイベントはDivにあるため、イベントを取得できなくなりました!したがって、当然、それらは選択されません。
もちろん、今は別の問題がありますか? ? ? ?これらの単語を選択しようとすると、選択されないことがわかります。
どうすればいいですか?すべてのイベントはdivに集中しています。 。 。 !!!!!!!
したがって、実際、このsetcapture()はロックのようなものです。これでロックされており、イベントはすべてdivにあります。これでロックを解除しても構いません。対応するものは解放()です。
releasecapture();キャプチャをリリースすることです。実際、マウスが飼育されているときに追加するだけです。
window.onload = function(){var odiv = document.getElementById( "div1"); var disx = 0; var disy = 0; odiv.onmousedown = function(ev){var oevent = ev ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; odiv.onmousemove = function(ev){var oevent = ev ||イベント; 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.releasecapture(); }; odiv.setcapture(); falseを返します。 //デフォルトのイベントをブロックし、Firefoxのバグを解決します}; };これで、テキスト選択の問題を解決できます。最後に、私たちは座って互換性があります。実際、このsetCapture()は互換性があり、他のブラウザに入れるのは間違っています。
それはとても簡単です。これと最後のコードからコードをマージするだけです。 IF判断を互換性のあるものにするだけです。最後に、編成されたコードが添付されています
<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 ||イベント; disx = oevent.clientx -odiv.offsetLeft; disy = oevent.clienty -odiv.offsettop; if(odiv.setcapture){odiv.onmousemove = mousemove; odiv.onmouseup = mouseup; odiv.setcapture(); // IE 7次のテキストは選択されません。実際には取得できないテキストまたは画像です。} else {document.onmousemove = mousemove; document.onmouseup = mouseup; } function mousemove(ev){var oevent = ev ||イベント; var odivleft = oevent.clientx -disx; var odivtop = oevent.clienty -disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; } function mouseup(ev){this.onmousemove = null; this.onmouseup = null; if(odiv.releasecapture){odiv.releasecapture(); // captureをリリース}} falseを返します。 //デフォルトのイベントをブロックし、Firefoxのバグを解決します}; }; </script>さて、すべてが行われますo(∩_∩)o haha〜