이전 드래그가 주변에 무언가가있을 때 어떤 문제가 발생할 것인지 봅시다. 고급 브라우저에는 문제가 없습니다. IE7에서 테스트 해 보겠습니다. 문제가 나옵니다. 그림처럼
우리는 텍스트가 선택되었음을 분명히 알 수 있습니다. 이 사용자 경험은 매우 나쁘고 사용하기 편리하지 않습니다. 그건 그렇고, 우리는 이전에 반환 거짓을 추가했습니다. 많은 문제를 해결하는 데 도움이되었습니다. 이것을 제거하면 크롬에서도 동일한 문제가 발생합니다. 즉,이 반환 허위입니다. Chrome FF IE9+ 브라우저의 문제를 해결할 수 있습니다.
실제로, 우리의 개발에는 페이지에 많은 요소가 있으며, 하나의 div 만 있으면 불가능합니다. 바이두지도와 같이 드래그 할 때 다른 장소는 선택되지 않습니다.
그래서 우리는 어떻게 그런 드래그를합니까? IE7 문제를 해결할 수 있습니까?
해결책:
우리는 작은 트릭을 사용하여 해결할 수 있습니다. 이 트릭은 IE6-8에서만 지원 될 수 있으며 다른 브라우저가 return false를 사용하기 때문에 실제로 우리의 문제를 해결할 수 있습니다. 트릭이 무엇인지 봅시다
이벤트 캡처! ! 코드를 간단한 설명에 첨부하십시오
<title> </title> <script type = "text/javaScript"> window.onload = function () {var obtn = document.getElementById ( "btn"); obtn.onclick = function () {alert (1); }; // 웹 페이지의 모든 장소의 이벤트는 버튼에 집중되어 있습니다. 즉, 전용 obtn.setCapture (); // 클릭 어디에서나옵니다.실제로, 페이지의 모든 장소의 이벤트는 한 지점에 집중되며 페이지의 모든 위치를 클릭하면 팝업이 나타납니다.
모든 이벤트를 하나의 버튼으로 수집하여 처리하십시오! ! 이것은 IE 와만 호환됩니다! !
이런 식으로 이전 코드를 수정하는 방법을 살펴 보겠습니다. . . .
먼저 모든 문서를 Div로 다시 변경합니다. 마우스가 더 빨리 드래그하기 때문에 이전에 말한 것을 기억하십니까? DIV를 드래그하기 쉽기 때문에 모든 이벤트를 문서에 추가합니다.
이제이 작업을 수행 할 필요가 없습니다. 이전 DIV에 setCapture ()를 추가하여 효과를 확인하십시오.
<body> IE 7의 텍스트가 선택됩니다. <br /> 당신이 반환 거짓 크롬 ff를 추가하지 않으면, 그러한 문제가있을 것입니다.
<스타일 유형 = "text/css"> #div1 {너비 : 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 (); 거짓을 반환합니다. // 기본 이벤트를 차단하고 Firefox 버그를 해결합니다}; }; </스크립트>현재 우리는 DIV를 빨리 끌 때 DIV를 끌어내는 데 실제로 문제가 없습니다. 실제로, setCapture ()를 추가 한 후 전체 웹 페이지의 모든 이벤트 가이 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 (); 거짓을 반환합니다. // 기본 이벤트를 차단하고 Firefox 버그를 해결합니다}; };이제 텍스트 선택 문제를 해결할 수 있습니다. 마지막으로, 우리는 앉아서 호환됩니다. 실제로이 setCapture ()는 호환되지 않으며 다른 브라우저에 넣는 것은 잘못입니다.
매우 간단합니다. 우리는 이것과 마지막 코드의 코드를 병합하면됩니다. IF 판단을 호환하십시오. 마지막으로 조직 된 코드가 첨부됩니다
<script type = "text/javaScript"> wind 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 = 마우스 업; odiv.setcapture (); // 7 다음 텍스트가 선택되지 않으며 실제로 얻을 수없는 텍스트 나 그림입니다.} else {document.onmouseMove = mousEmove; document.onmouseup = 마우스 업; } 함수 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 (); // release capture}} false를 반환합니다. // 기본 이벤트를 차단하고 Firefox 버그를 해결합니다}; }; </스크립트>좋아, 모든 것이 끝났다. o (∩_∩) o 하하 ~