滚动scroll&拖拽client

鼠标事件有:

mousedown、mouseup、mousemove、mouseover、mouseout、click、dblclick

事件对象的属性:

clientX/clientY 所有浏览器都支持,窗口位置

pageX/pageY IE8以前不支持,页面位置

参数e在IE8以前不支持,它支持window.event

封装兼容性的函数:

window.onload = function () {
var i1 = document.getElementById("i1");

document.onmousemove = function (e) {

// window.event IE8中获取事件参数
//IE8 中不支持pageX pageY
// i1.style.left = window.event.pageX - 20 + "px";
// i1.style.top = window.event.pageY -20 + "px";


//e浏览器兼容
e = e || window.event;

//pageX 兼容浏览器
//在IE8中 pageX = clientX + 页面滚动出去的距离
i1.style.top = getPage(e).pageY + "px";
i1.style.left = getPage(e).pageX + "px";
}
}
function getPage(e) {
return {
pageX: e.pageX || (e.clientX + scroll().scrollLeft),
pageY: e.pageY || (e.clientY + scroll().scrollTop)
}
}
function scroll() {
return {
scrollLeft:document.body.scrollLeft || document.documentElement.scrollLeft,
scrollTop:document.body.scrollTop || document.documentElement.scrollTop
};
}

实际案例中要视情况注意使鼠标只能在固定盒子中移动
鼠标移出时要设置事件的清除

element.onclick = null;

或者removeEventListener

 

addEventListener:

DOM2

现代浏览器支持,IE9+

可以选择可以给同一个事件注册多个事件处理程序 捕获或者冒泡

IE9以前使用attachEvent

后面有三个参数:type    listener   false

第一个参数是事件名称,不带ON,第二个参数是事件的处理函数,第三个参数是布尔类型,一般用false

 

处理兼容的函数:

var  EventTools = {
addEventListener : function (element, type, listener) {
if(element.addEventListener) {
element.addEventListener(type, listener, false);
}else if(element.attachEvent) {
element.attachEvent("on" + type, listener);
}else{
element["on" + type] = listener;
}
}
};

 

第一个参数 : 事件名称 注意不带on
//第二个参数 : 事件的监听者 -- 事件处理函数
//第三个参数 : Boolean类型 以后讲
posted @ 2016-08-16 00:45  程序猿1990  阅读(383)  评论(0编辑  收藏  举报