js div 드래그 호 환 i / fireforx js 마우스 위치 깊이 분석
7776 단어 웹 전단
js 에서 마우스 위치의 각종 매개 변 수 를 가 져 옵 니 다.
명칭.
해명 하 다.
clientX
이벤트 속성 은 이벤트 가 실 행 될 때 브 라 우 저 페이지 (또는 클 라 이언 트) 에 대한 수평 좌 표를 되 돌려 줍 니 다.
clientY
이벤트 속성 은 이벤트 가 실 행 될 때 브 라 우 저 페이지 (클 라 이언 트) 에 대한 수직 좌 표를 되 돌려 줍 니 다.
screenX
이벤트 속성 은 이벤트 가 발생 했 을 때 화면의 수평 좌표 에 비해 마우스 포인 터 를 되 돌려 줍 니 다.
screenY
이벤트 속성 은 이벤트 가 발생 했 을 때 화면 에 대한 수직 좌 표를 되 돌려 줍 니 다.
offsetX
사건 이 발생 한 장 소 는 사건 소스 요소 의 좌표 시스템 에서 x 좌표 (ie) 입 니 다.
offsetY
사건 이 발생 한 장 소 는 사건 소스 요소 의 좌표 시스템 에 있 는 y 좌표 (ie) 입 니 다.
x
이벤트 가 발생 한 위치의 x 좌 표 는 CSS 동적 포 지 셔 닝 의 가장 안쪽 포용 요소 (ie, ~ pageX) 에 비해.
y
이벤트 가 발생 한 위치의 y 좌 표 는 CSS 동적 포 지 셔 닝 의 가장 안쪽 포용 요소 (ie, ~ pageY) 에 비해.
pageX
문서 의 왼쪽 가장자리 (fireforx, ~ x) 에 비해 마우스 포인터 의 위치 입 니 다.
pageY
문서 의 상단 가장자리 (fireforx, ~ y) 에 비해 마우스 포인터 의 위치 입 니 다.
layerX
마우스 가 현재 좌표계 의 위치 (fireforx, ~ offsetX) 보다 낫다.
layerY
마 우 스 는 현재 좌표계 의 위치 (fireforx, ~ offsetY) 보다 낫다.
1、clientX/clientY：
이 두 속성 은 이벤트 가 실 행 될 때 마우스 포인터 가 브 라 우 저 페이지 (클 라 이언 트) 에 대한 수평, 수직 좌 표를 되 돌려 줍 니 다. 그림 참조:
2、screenX/screenY：
이벤트 가 발생 했 을 때 마우스 포인터 가 화면의 수평, 수직 좌표 에 비해 그림 과 같 습 니 다.
3、offsetX/offsetY：
이 두 속성 은 IE 브 라 우 저 특유 의 것 으로 이벤트 가 발생 한 장소 가 이벤트 소스 요소 의 좌표 시스템 에 있 는 x 좌표 와 y 좌 표를 말한다.여 기 는 전체 브 라 우 저 나 전체 화면 이 아니 라 이벤트 가 발생 한 대상 에 게 아래 의 그림 은 빨간색 영역 을 이벤트 소스 로 하여 offsetX, offsetY 가 빨간색 영역 왼쪽 상단 에 있 는 위치 좌 표를 보 여 줍 니 다.
4、x、y：
이 두 속성 도 IE 특유 의 것 으로 사건 이 발생 하 는 위치의 x 좌표 와 y 좌 표를 말한다. 이것 은 CSS 동적 으로 포 지 셔 닝 하 는 가장 안쪽 포용 요소, 즉 목표 사건 의 부모 요소 에 비해 외부 경계 가 xy 좌표 에 있 는 위 치 를 말한다.Firefox 의 페이지 X, 페이지 Y 좌표 에 해당 합 니 다.이벤트 원본 의 부모 대상 이 document 일 때 x 와 y 는 clientX, clientY 와 같 습 니 다.
대상 원본 의 부모 가 브 라 우 저 창 이 아 닐 때 xy 의 값 은 clientX 와 clientY 와 다 릅 니 다.
5、layerX/layerY：
마 우 스 는 현재 좌표계 의 위치 에 비해 Firefox 에서 지원 하 는 것 으로 IE 의 offsetX 와 offsetY 와 비슷 합 니 다.
6、pageX/pageY：
마우스 포인터 의 위 치 는 문서 의 왼쪽 가장자리 와 위쪽 가장자리 에 비해 fireforx 에서 지원 하 며 ie 의 x 와 y 와 비슷 합 니 다.
6 、 드래그 가능 div
위의 분석 에 따 르 면 우 리 는 끌 수 있 는 div 를 만 들 고 먼저 이동 div 원 리 를 분석 합 니 다.
그림 과 같이 마우스 위치 1 시 좌 표를 (x0, y0) 로 설정 하면 마우스 위치 2 시 (x1, y1), B 시 (x, y), 마우스 거리 가 빨간색 구역 에 있 는 위 치 는: (left, top) 이다. 그러면:
x = (x0-left) + (x1-x0)=x1-left，y=(y0-top) + (y1-y0)=y1-top.
즉, B 점 좌 표 는 (x1 - left, y1 - top) 이다.
마우스 이벤트 와 결합 하여 전체적인 사고방식 은:
다음은 본 고의 모든 캡 처 실현 소스 코드 입 니 다. 참고 하 시기 바 랍 니 다.
js 스 크 립 트:
//left,top
var left=0,top=0;
var flag = false;
$(function(){
$(document).mousemove(function(evt){
evt = window.event || evt;
//
//clientX （ ） 。
//clientY （ ） 。
var $clientX = evt.clientX;
var $clientY = evt.clientY
valueShow('_clientX',$clientX);
valueShow('_clientY',$clientY);
//screenX 。
//screenY 。
var $screenX = evt.screenX;
var $screenY = evt.screenY;
valueShow('_screenX',$screenX);
valueShow('_screenY',$screenY);
});
$('#srcdiv').mousemove(function(evt){
//$console.empty();
evt = window.event || evt;
///IE
// x y 。
var $offsetX = evt.offsetX;
var $offsetY = evt.offsetY;
valueShow('_offsetX',$offsetX);
valueShow('_offsetY',$offsetY);
// x y ， CSS 。
var $x = evt.x;
var $y = evt.y;
valueShow('_x',$x);
valueShow('_y',$y);
// ， 。
var $pageX = evt.pageX;
var $pageY = evt.pageY;
valueShow('_pageX',$pageX);
valueShow('_pageY',$pageY);
var $layerX = evt.layerX;
var $layerY = evt.layerY;
valueShow('_layerX',$layerX);
valueShow('_layerY',$layerY);
});
$('#abc').mousemove(function(evt){
evt = window.event || evt;
///IE
// x y ， CSS 。
var $x = evt.x;
var $y = evt.y;
valueShow('_x',$x);
valueShow('_y',$y);
var $pageX = evt.pageX;
var $pageY = evt.pageY;
valueShow('_pageX',$pageX);
valueShow('_pageY',$pageY);
});
//console
$(window).scroll(function(){
var top = document.documentElement.scrollTop;
$('#console').offset({top:top});
});
function valueShow(id,msg){
$('#'+id).text(msg);
}
//------------ -----------
$('#srcdiv').mousedown(function(evt){
flag = true;//
var isIE = (document.all) ? true : false;
if(isIE){
left = event.offsetX;
top = event.offsetY;
}else{
left = evt.layerX;
top = evt.layerY;
}
});
$('#srcdiv').mousemove(function(evt){
if(!flag)return;//
var isIE = (document.all) ? true : false;
var x = isIE?event.x:evt.pageX;
var y = isIE?event.y:evt.pageY;
x = (x - left)>0?(x - left):0;
y = (y - top)>0?(y - top):0;
$(this).offset({
left: x ,
top: y
});
});
$(document).mouseup(function(evt){
flag = false;//
});
});
페이지:
clientX （ ） 。 clientY （ ） 。 screenX 。 screenY 。 offsetX x (ie) offsetY y (ie) x x , CSS (ie,~pageX)。 y y , CSS (ie,~pageY)。 layerX (firefox,~offsetX) layerY (firefox,~offsetY) pageX ， (firefox,~x)。 pageY ， (firefox,~y)。
클릭 하여 모든 코드 획득
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
js div 드래그 호 환 i / fireforx js 마우스 위치 깊이 분석이벤트 속성 은 이벤트 가 실 행 될 때 브 라 우 저 페이지 (클 라 이언 트) 에 대한 수직 좌 표를 되 돌려 줍 니 다. 이 두 속성 은 이벤트 가 실 행 될 때 마우스 포인터 가 브 라 우 저 페이지 (클 라...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
