滚动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类型 以后讲

滚动scroll&拖拽client

标签：

原文地址：http://www.cnblogs.com/sw1990/p/5774868.html