美文网首页
鼠标点击后相对于事件源(event.target)的位置

鼠标点击后相对于事件源(event.target)的位置

作者: Lo阿飞ve | 来源:发表于2018-07-10 13:50 被阅读0次
function getOffsetXY(evt) {
    if (evt.offsetX && evt.offsetY) return {x: evt.offsetX, y: evt.offsetY};
 
    var ele = evt.target || evt.srcElement;
    var o = ele;
 
    var x = 0;
    var y = 0;
    while (o.offsetParent) {
        x += o.offsetLeft;
        y += o.offsetTop;
        o = o.offsetParent;
    }
    // 处理当元素处于滚动之后的情况
    var left = 0;
    var top = 0
    while (ele.parentNode) {
        left += ele.scrollLeft;
        top += ele.scrollTop;
        ele = ele.parentNode;
    }
    return {x: evt.pageX + left - x, y: evt.pageY + top - y};
}
用法:
 var _x = getOffsetXY(event).x,
        _y = getOffsetXY(event).y;

相关文章

  • 鼠标点击后相对于事件源(event.target)的位置

  • screenX / Y,clientX / Y和pageX /

    offsetX,offsetY IE浏览器特有的事件属性鼠标点击的位置相当于事件源元素的位置坐标,以元素盒子模型的...

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

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

  • 2018-01-01

    oncontextmune事件 当用户在某元素上点击鼠标右键时触发此事件。 如何获取鼠标位置 当用户点击某元素,并...

  • 事件

    (1)、鼠标事件: 鼠标点击事件(单击): onclick 鼠标点击事件(...

  • Js事件和事件对象

    一、事件概述 事件三要素:事件源:触发(被)事件的元素事件类型:事件的触发方式(例如鼠标点击或键盘点击)事件处理程...

  • 鼠标事件

    1. 鼠标事件 // 点击事件 onclick // 双击事件 ondblclick // 鼠标右键点击事件 on...

  • 事件一

    事件基础(一) 什么是事件对象(点击事件,想知道用户点击了哪,就用到了事件对象) 用来获取事件的详细信息:鼠标位置...

  • 常用事件

    鼠标事件 onclick 点击事件点击鼠标左键触发 ondblclick双击事件双击鼠标左键触发 onmouseo...

  • pageX、clientX、screenX、offsetX、Sc

    1、鼠标事件 clientX 设置或获取鼠标指针位置相对于浏览器内容窗口的 x 坐标,其中客户区域不包括窗口自身的...

网友评论

      本文标题:鼠标点击后相对于事件源(event.target)的位置

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