V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
qazwsxkevin

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

  •  
  •   qazwsxkevin · Jan 22, 2021 · 2685 views
    This topic created in 1933 days ago, the information mentioned may be changed or developed.

    为了容易维护,方便区分表格,和测试等事情
    我没有在 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 replies    2021-01-23 18:13:56 +08:00
    ashong
        1
    ashong  
       Jan 22, 2021 via iPhone   ❤️ 1
    =function(e){
    e.target
    }
    shakaraka
        2
    shakaraka  
    PRO
       Jan 22, 2021   ❤️ 1
    你是想获取 tartable 本身?
    document.getElementById('testtbl').onclick = function(e){ console.log(e.target) }
    或者
    document.getElementById('testtbl').onclick = function(){ console.log(this) }
    都行,建议第二种
    dd112389
        3
    dd112389  
       Jan 22, 2021   ❤️ 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  
       Jan 22, 2021 via iPhone   ❤️ 1
    现在不会读文档也能当程序员了吗。
    https://www.google.com/search?q=onmouseover+mozilla
    qazwsxkevin
        5
    qazwsxkevin  
    OP
       Jan 22, 2021 via iPhone
    @Elethom 抱歉,正职还真的不是程序员,临时临急要上一些功能,如果打扰您了,万分抱歉
    krixaar
        6
    krixaar  
       Jan 22, 2021
    这问题还没解决呢,不那么完美主义的话,换我早就一个十字线.svg 加几行 css 搞定了,至于十字线超出表格范围了,又不是强迫症……
    rodrick
        7
    rodrick  
       Jan 22, 2021
    mouseover 是移入事件,e.target 是移入目标元素,e.relatedTarget 是移出对象。子元素的 mouseover 是会冒泡的,冒泡中 e.target 是当前冒泡到的元素,而 this 是 event 发生的元素。注意一下这几点就差不多了
    SoloCompany
        8
    SoloCompany  
       Jan 23, 2021 via iPhone
    有被 document.all 笑到
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3036 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 58ms · UTC 13:35 · PVG 21:35 · LAX 06:35 · JFK 09:35
    ♥ Do have faith in what you're doing.