JQuery event 实现鼠标滑过获取坐标

我需要注意什么:
event表示事件的真正触发者,event是鼠标事件对象,代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
在event中包含了事件触发时的参数,比如click事件的event中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等,在ie中,event是全局的可以通过window.event来获取,在其他浏览器中都是作为参数传入的

鼠标在div框移动时,获取鼠标在页面中的位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>习题</title>
    <style>
    div {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        text-align: center;
        line-height: 100px;
    }
    </style>
</head>

<body>
    <div></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    //此处写代码
    $('div').mousemove(function(event){
        $(this).text('鼠标垂直位置:'+event.pageX+'鼠标水平位置:'+event.pageY)
    })
    </script>
</body>

</html>
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,568评论 1 11
  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 707评论 0 1
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,653评论 2 10
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,392评论 0 8
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    LemonnYan阅读 700评论 0 4