JS-鼠标事件对象

一、四种鼠标事件对象

一、target   触发事件的元素。不一定的绑定事件，谁触发了就是谁
    比如：绑定事件为box，如果box的子级触发了这个事件，就是box的子级

二、offsetY  鼠标距离触发事件元素 的 Y轴 的距离

三、clientY   鼠标距离可视窗口顶部的距离

四、pageY     鼠标距离HTML页面顶部的距离

二、一般在下面这种类型用在鼠标事件上，
为了获得鼠标距离 redDiv的x 、y轴的距离

 // 点击redDiv
redDiv.onmousedown = function(ev){
    var evObj = window.event || ev;
    // 获取 鼠标距离 redDiv的x 、y轴的距离
    var offsetX = evObj.offsetX;
    var offsetY = evObj.offsetY;

    // 鼠标移动
    documetn.onmouseover = function(ev){
        var evObj = window.event || ev;
        var x = evObj.clientX - offsetX;
        var y = evObj.clientY - offsetY;
    }
}

三、鼠标事件的单击双击、

redDiv.onclick = function(){
    clearTimeout(timer);  //删除上一次单击事件，双击的第一次单击事件
    timer = setTimeout(function(){
        console.log("单击事件");
    }1000);
}
redDiv.ondblclick = function(){
    clearTimeout(timer);   //删除此次单击事件，双击的第二次单击事件
    console.log("双击事件");
}

屏幕快照 2017-10-21 下午4.24.08.png

双击清除单击二的事件，注：双击的时间要比 单击二的事件执行时间块。