Vamos ver quais problemas ocorrerão quando o arrasto anterior existe quando algo ao seu redor? Não haverá problema em navegadores avançados. Vamos testá -lo no IE7 e o problema será lançado. Como mostrado
Podemos ver claramente que o texto foi selecionado. Então essa experiência do usuário é muito ruim e não é conveniente de usar. A propósito, adicionamos um retorno falso antes; nos ajudou a resolver muitos problemas. Se removermos isso, o mesmo problema ocorrerá no Chrome. Por isso, é dizer, esse retorno falso; Pode resolver os problemas do Chrome FF IE9+ navegadores.
De fato, em nosso desenvolvimento, existem muitos elementos na página e é impossível ter apenas uma div. Outros lugares não serão selecionados quando você arrastar, como o mapa do Baidu, você pode brincar com ele.
Então, como fazemos tal arrasto? Pode resolver o problema do IE7?
Solução:
Podemos usar um pequeno truque para resolvê -lo. Esse truque só pode ser suportado no IE6-8 e pode realmente resolver nosso problema, porque outros navegadores usam o retorno false; Vamos ver quais são os truques
É captura de eventos! ! Anexe o código à breve descrição
<Title> </title> <script type = "text/javascript"> window.onload = function () {var obtn = document.getElementById ("btn"); obtn.OnClick = function () {alert (1); }; // Eventos em todos os lugares na página da web estão concentrados em um botão, ou seja, obtn.setCapture () dedicado; // Onde quer que você clique, você pop a} </script> </ad Head> <body> <input type = "button" id = "btn" value = "button"/> </body>De fato, os eventos em todos os lugares da página estão concentrados em um ponto, e um pop -up ao clicar em qualquer posição da página, que é a função do setCapture ().
Colete todos os eventos em um botão para manusear! ! Isso é compatível apenas com o IE! !
Dessa forma, deixe -me ver como modificar o código anterior. . . .
Primeiro, mudamos todos os documentos de volta ao div. Você se lembra que já dissemos antes disso, porque o mouse se arrasta mais rápido, é fácil arrastar a div, então adicionamos todos os eventos ao documento.
E agora não há necessidade de fazer isso, adicione um setCapture () ao nosso Div anterior para ver o efeito.
<Body> O texto no IE 7 será selecionado. <r /> se você não adicionar retorno false chrome ff, haverá um problema como asdsadad <r /> <div id = "div1"> asdsadad asdsadad asdsadad </div> asdsadadasdsdsadad </body>
<style type = "text/css"> #div1 {width: 200px; Altura: 200px; Antecedentes: vermelho; Posição: Absoluto; } </style> <script type = "text/javascript"> // arrastar e soltar div em vazio. Versão baixa do firefox tem bug window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; disx = oEvent.clientX - odiv.OffSetleft; disy = oevent.clienty - odiv.offsetTop; odiv.onMousEMove = function (ev) {var oevent = ev || evento; 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 (); retornar falso; // bloqueia o evento padrão e resolva o bug do Firefox}; }; </script>Neste momento, na verdade não temos o problema de arrastar a div quando a arrastarmos rapidamente. De fato, depois de adicionar setCapture (), todos os eventos em toda a página da web serão coletados nesta div.
De fato, este texto não será selecionado agora. Por que? Como todos os eventos do texto e das imagens estão agora na div, eles não podem mais obter os eventos! Então, naturalmente, eles não serão selecionados.
Claro que há outro problema agora? ? ? ? Você descobrirá que, quando tentar selecionar essas palavras, não será selecionado.
O que devo fazer? Todos os eventos estão concentrados na div. . . !!!!!!
Então, de fato, esse setCapture () é como uma trava. Agora está bloqueado e os eventos estão todos na div. Agora não há problema em desbloqueá -lo. O correspondente é releaseCapture ();
RELEASECAPTURA (); é liberar captura. De fato, basta adicioná -lo quando o mouse for criado.
window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; disx = oEvent.clientX - odiv.OffSetleft; disy = oevent.clienty - odiv.offsetTop; odiv.onMousEMove = function (ev) {var oevent = ev || evento; 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 (); retornar falso; // bloqueia o evento padrão e resolva o bug do Firefox}; };Agora podemos resolver o problema da seleção de texto. Finalmente, nos sentamos e compatíveis. De fato, esse setCapture () é incompatível e é errado colocá -lo em outros navegadores.
Isso é muito simples. Só precisamos mesclar os códigos deste e do último. Basta fazer um julgamento se compatível com o julgamento. Finalmente, o código organizado está anexado
<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 || evento; disx = oEvent.clientX - odiv.OffSetleft; disy = oevent.clienty - odiv.offsetTop; if (odiv.setCapture) {odiv.onMouSeMove = mouseMove; odiv.onMouseUp = mouseup; odiv.setCapture (); // ou seja 7 O texto a seguir não será selecionado, na verdade é o texto ou a imagem que não pode ser obtida.} Else {document.onMouseMove = mouseMove; document.onmouseup = mouseup; } função mouseMove (ev) {var oevent = ev || evento; 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 (); // Captura de liberação}} retorna false; // bloqueia o evento padrão e resolva o bug do Firefox}; }; </script>Ok, tudo é feito o (∩_∩) o haha ~