V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
qazwsxkevin
V2EX  ›  JavaScript

onmouseover = function ()这种写法,如何传入元素对象本身?

  •  
  •   qazwsxkevin · 2021-01-22 00:48:15 +08:00 · 2018 次点击
    这是一个创建于 1428 天前的主题,其中的信息可能已经有所发展或是发生改变。

    为了容易维护,方便区分表格,和测试等事情
    我没有在 testtbl 的 table 标签上使用 onmouseover=someFunction(event,this)的方式去调用函数...
    目前只用.onmouseover = function ()的

        tartable = document.getElementById('testtbl');
        tartable.onmouseover = function (event,obj) { // <--obj 改 this 是不行的
            t_clientX = event.clientX - obj.offsetLeft;
            y_clientY = event.clientY - obj.offsetTop;
            document.all('tester').innerHTML = t_clientX
        }
    

    想获得鼠标在 testtbl 这个表格元素内的 tx,ty 坐标,
    然后只在表格范围内画一个跟随鼠标游动的十字准星光标

    8 条回复    2021-01-23 18:13:56 +08:00
    ashong
        1
    ashong  
       2021-01-22 01:08:43 +08:00 via iPhone   ❤️ 1
    =function(e){
    e.target
    }
    wunonglin
        2
    wunonglin  
       2021-01-22 01:29:44 +08:00   ❤️ 1
    你是想获取 tartable 本身?
    document.getElementById('testtbl').onclick = function(e){ console.log(e.target) }
    或者
    document.getElementById('testtbl').onclick = function(){ console.log(this) }
    都行,建议第二种
    dd112389
        3
    dd112389  
       2021-01-22 02:46:29 +08:00   ❤️ 1
    没懂楼主的描述.
    还有 document.all 不是个方法是个对象吧. 参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/all
    如果是想在一个容器内获取坐标直接绑定 mousemove 事件然后拿 event 获取不就好了?
    如果你是想在事件中拿到自身元素的话可以这样写:
    let table = document.querySelector('#testtbl');
    table.onmousemove = function () {
    console.log(this === table) // true
    }
    或者
    table.onmousemove = () => {
    console.log(table) // Element
    }
    Elethom
        4
    Elethom  
       2021-01-22 02:54:51 +08:00 via iPhone   ❤️ 1
    现在不会读文档也能当程序员了吗。
    https://www.google.com/search?q=onmouseover+mozilla
    qazwsxkevin
        5
    qazwsxkevin  
    OP
       2021-01-22 08:25:20 +08:00 via iPhone
    @Elethom 抱歉,正职还真的不是程序员,临时临急要上一些功能,如果打扰您了,万分抱歉
    krixaar
        6
    krixaar  
       2021-01-22 09:48:35 +08:00
    这问题还没解决呢,不那么完美主义的话,换我早就一个十字线.svg 加几行 css 搞定了,至于十字线超出表格范围了,又不是强迫症……
    rodrick
        7
    rodrick  
       2021-01-22 10:46:01 +08:00
    mouseover 是移入事件,e.target 是移入目标元素,e.relatedTarget 是移出对象。子元素的 mouseover 是会冒泡的,冒泡中 e.target 是当前冒泡到的元素,而 this 是 event 发生的元素。注意一下这几点就差不多了
    SoloCompany
        8
    SoloCompany  
       2021-01-23 18:13:56 +08:00 via iPhone
    有被 document.all 笑到
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2322 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:59 · PVG 23:59 · LAX 07:59 · JFK 10:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.