• 凉风有兴,秋月无边, 亏我思娇的情绪好比度日如年。
  • 虽然我不是玉树临风,潇洒倜傥, 可是我有我广阔的胸襟,加强健的臂腕!

关于鼠标事件和手机中的各个事件的几点总结

网站推广 villain 6个月前 (11-17) 34次浏览 已收录 0个评论

onmousedown事件,当鼠标左键按下时触发。 如:当鼠标元素boxq1上按下时,改变它的背景颜色。

2. onmouseup事件,当鼠标左键抬起时触发。如:鼠标按下之前元素box1背景颜色为红色,当按下之后变为绿色,放开之后又变为红色。

var box1 = document.getElementById("box1");
box1.onmousedown = function(){
 box1.style.backgroundColor = 'green';
box1.onmouseup = function(){
 box1.style.backgroundColor = 'red';
};

3. onmousemove事件,当鼠标在元素上移动时触发。如:鼠标在元素box1上移动时,控制台输出鼠标的位置。

box1.onmousemove = function(e){
 var x = e.pageX;
 var y = e.pageY;
 console.log('鼠标横坐标为:'+x+'******鼠标纵坐标为:'+y);
};

4. onmouseenter事件,当鼠标进入元素的瞬间触发,仅在鼠标进入元素时触发。如:鼠标在进入元素box1时,元素背景颜色改为绿色。

它与onmousedown事件区别在于:后者是再按下的瞬间触发,而前者是在进入元素瞬间才触发,也就是说鼠标在元素边界上才触发。

var box1 = document.getElementById("box1");
box1.onmouseenter = function(){
 box1.style.backgroundColor = 'green';
};

5. onmouseleave事件,当鼠标移出元素的瞬间触发,仅在鼠标移出元素时触发,发生在元素边界。如:鼠标在进入元素box1时,背景颜色改为绿色,移出元素后又变为红色。

var box1 = document.getElementById("box1");
box1.onmouseenter = function(){
 box1.style.backgroundColor = 'green';
box1.onmouseleave = function(){
 box1.style.backgroundColor = 'red';
};

6. onmouseover事件,当鼠标在元素之上的时候触发,只要鼠标留在元素之上就会触发,仅触发一次,不管鼠标是否移动,这是它和onmousemove的区别。如:鼠标在元素box1上时一直在控制台输入数字一。

box1.onmouseover = function(){
 console.log(new Date());
};

7. onmouseout事件,当鼠标离开目标元素是触发,效果和原理与mouseleave没有什么区别,只是在Firefox下没有onmouseenter和onmouseleave,只能使用onmouseover和onmouseout;而在IE中便可使用onmouseennter和onmouseleave来代替前两个。

二、手机触摸事件

1. ontouchstart事件,触摸开始事件,当手机屏幕被触摸的瞬间触发。如:当触摸手机的瞬间输出当前触摸的位置坐标。

var box1 = document.getElementById("box1");
box1.ontouchstart = function(e){
 var touch = e.touches[0];
 var x = Number(touch.clientX);
 var y = Number(touch.clientY);
 console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y);
};

2. ontouchmove事件,触摸的整个过程触发,当手指在屏幕上移动的时候触发。如:当手指在屏幕上移动的时候获取当前触摸位置。

var box1 = document.getElementById("box1");
box1.ontouchmove = function(e){
 var touch = e.touches[0];
 var x = Number(touch.clientX);
 var y = Number(touch.clientY);
 console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y);
};

3. ontouchend事件,触摸结束的瞬间触发,即当手指离开屏幕时触发。如:当手指离开屏幕时,改变元素的背景颜色。

var box1 = document.getElementById("box1");
 box1.ontouchstart = function(e){
 var touch = e.touches[0];
 box1.style.backgroundColor = 'green';
};

4. ontouchcancel事件,触摸过程被系统取消时触发,当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

注意事项:

手机触摸事件获得焦点区别:

原生写法:

var e = window.event;

var touchs = e.touches[0];

var startX = Number(touchs.pageX);

jQuery写法:

var e = window.event;

var touchs = e.originalEvent.targetTouches[0];//获得第一个触点

var startX = Number(touchs.pageX);

三、手机手势事件

1. ongesturechange事件,必须是多点触摸才可触发事件,比如手机中的旋转、缩放等操作。如:

var div = document.getElementById("div");
div.ongesturechange = function(e){
 //scale代表手势产生的缩放比例,小于1是缩小,大于1是放大,原始为1
 var scale = e.scale;
 //rotation代表旋转手势的角度,值区间[0,360],正值顺时针旋转,负值逆时针
 var angle = e.rotation;
};

四、重力感应事件

1. 重力感应事件其实是利用了window.orientation事件,通过判断手机是横屏还是竖屏来实现重力感应效果。只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下:
0:与页面首次加载时的方向一致
-90:相对原始方向顺时针转了90
180:转了180
90:逆时针转了90



Villain博客 , 版权所有丨如有问题请联系客服QQ:1004619丨
转载请注明关于鼠标事件和手机中的各个事件的几点总结
喜欢 (0)
[gqakcom@126.com]
分享 (0)

您必须 登录 才能发表评论!