美文网首页
JS-鼠标事件对象

JS-鼠标事件对象

作者: 大大的小小小心愿 | 来源:发表于2017-10-21 16:28 被阅读0次

一、四种鼠标事件对象

一、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

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

相关文章

  • JS-鼠标事件对象

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

  • JavaScript 事件类型,事件绑定,事件监听

    事件类型 事件绑定 事件监听 事件类型 鼠标事件: onclick:鼠标单击对象时触发 ondblclick:鼠标...

  • web前端-原生鼠标拖拽效果

    鼠标拖拽效果分为3个事件 鼠标按下事件onmousedown, 事件源是点击的对象, 就是我们要拖拽的对象 鼠标移...

  • dom事件对象

    事件定义 常见事件 常见绑定方法 事件对象 鼠标键盘事件对象

  • 第七课 js事件

    event事件对象 1、什么是event事件对象? 用来获取事件的详细信息:鼠标位置、键盘按键 ——例子:获取鼠标...

  • js事件

    event事件对象 1、什么是event事件对象? 用来获取事件的详细信息:鼠标位置、键盘按键 ——例子:获取鼠标...

  • JavaScript事件

    主要事件表: 鼠标单击事件onclick 鼠标经过事件(onmouseover) 当鼠标移动到一个对象上时,就会触...

  • js进阶小知识1

    1.event事件对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标...

  • JS-事件类型(鼠标事件中event对象的独有属性)

    本来想和上一篇一起写,又担心太长,导致自己复习时,看不下去,于是就另写一篇笔记。 ClientX与ClientY返...

  • 复习笔记之API(7) 事件对象常用属性和方法&&冒泡及带来的影

    事件对象 event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等简单的理解:事件发生后,跟...

网友评论

      本文标题:JS-鼠标事件对象

      本文链接:https://www.haomeiwen.com/subject/tmmiuxtx.html