您现在的位置是:首页 > 正文

event对象(续篇)

2024-01-30 19:49:06阅读 0

event对象的属性

(5)clientX属性用于获取鼠标在浏览器窗口中的X坐标,这是一个只读属性,只能获取鼠标的当前值,不能改变鼠标的位置。

语法格式:[window.]event.clientX

(6)clientY属性用于获取鼠标在浏览器窗口中的Y坐标,这是一个只读属性,只能获取鼠标的当前值,不能改变鼠标的位置。

语法格式:[window.]event.clientY

例子:这是一个文字随鼠标移动的案例。当鼠标移动到文字上方时,按下鼠标左键,就可以拖动文字。

      拖动前:

      拖动后:

关键代码展示:

 <script language="javascript">
    var x,y,z;
    function move(){ //创建函数
        if(event.button==0){ //鼠标左键状态
            z.style.left=temporarily1+event.clientX-x+"px"; //获取文字位置
            z.style.top=temporarily2+event.clientY-y+"px";
            return false;
        }
    }
    function down(){ //自定义函数
        if(event.srcElement.className=="move_out"){ //应用srcElement属性获取当前事件的对象
            z=event.srcElement;
            temporarily1=z.offsetLeft;
            temporarily2=z.offsetTop;
            x=event.clientX; //获取鼠标在窗口中的X位置
            y=event.clientY; //获取鼠标在窗口中的Y位置
            document.οnmοusemοve=move;
            document.οnmοuseup=function(){
                document.οnmοusemοve=null;
            }
        }
    }
    document.οnmοusedοwn=down;
</script>

CSS代码:

.move_out{
            position:relative;
            cursor:hand;
            font-family: "华文行楷";
            color:#000ff#;
            font-size:36px;
        }

(7)X属性用于设置或获取鼠标指针位置相对于CSS有position属性的上级元素的X坐标。如果CSS属性中没有position属性的上级元素,默认以body元素作为参考对象。

语法格式:[window.]event.X

(8)Y属性用于设置或获取鼠标指针位置相对于CSS有position属性的上级元素的X坐标。如果CSS属性中没有position属性的上级元素,默认以body元素作为参考对象。

语法格式:[window.]event.Y

注:如果事件触发后,鼠标指针移除窗口外,则返回值-1.这是一个只读属性,只能通过它获取鼠标的当前值,不能用它来改变鼠标的位置。

 

 

网站文章

  • YOLO V7 detect.py运行后图像没Bounding Box问题解决方案

    YOLO V7 detect.py运行后图像没Bounding Box问题解决方案

    YOLO V7 detect.py运行后图像没效果问题解决方案

    2024-01-30 19:48:58
  • python常见报错异常大全,根据异常找出根本问题,一键解决,建议收藏

    在我们平时写项目时,会经常遇到各种报错,十分影响我们的编码速度,下面是我收集的python的所有异常,以及异常原因,帮助你们解决问题异常名称:描述BaseException:所有异常的基类System...

    2024-01-30 19:48:30
  • linux xargs命令一(与find ls等命令组合)

    xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具。它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处理。通常情况下,xargs从管道或者stdin中读取数据,但是它也能够从文件的输出中读取数据。xargs的默认命令是echo,这意味着通过管道传递给xargs的输入将会包含换行和空白,不过通过xargs的处理,换行和空白将被空格取代。 在使用 find命令

    2024-01-30 19:48:22
  • centos7 防火墙设置

    centos7 防火墙设置

    centos7 防火墙设置 开启 关闭 开放端口

    2024-01-30 19:47:46
  • api-ms-win-crt-runtime-|1-1-0.dll插件丢失(64位)

    解决方法 1、所需文件:(1)api-ms-win-crt-runtime-|1-1-0.dll插件下载(64位) (2)vc_redist.x64.exe 下载链接: api-ms-win-crt-runtime-|1-1-0.dll 、vc_redist.x64.exe文件,可从本人资源中下载。2、步骤: (1)把api-ms-win-crt-runtime-|1-1-0...

    2024-01-30 19:47:39
  • AI 大模型 LLM 的基础概念、核心算法原理数学模型和发展历史及其应用领域

    文本摘要是指从大量的文本中提取关键信息,并生成简洁、易于理解的摘要。LLM能够通过对文本进行编码和自动摘要,从而提高文本摘要的质量和效率。总之,LLM是自然语言处理领域中的一个重要组成部分,它通过对大量数据进行训练,实现了自然语言理解、文本分类、机器翻译、文本摘要等多种自然语言处理任务。在未来的发展中,我们可以预见LLM将会有着更广泛的应用场景,并为人工智能技术的发展带来更大的推动力。

    2024-01-30 19:47:31
  • 什么时候可以将数字化仪用作示波器,示波器数字化仪和非示波器数字化仪有什么区别?

    什么时候可以将数字化仪用作示波器,示波器数字化仪和非示波器数字化仪有什么区别?

    Spectrum PCIe和LXI数字化仪 这是一个有趣的问题,回答它的最好方法是查阅示波器的字典定义:“用于测量电压变化的电子仪器。它在屏幕上显示电振荡的波形。” 数字转换器和适当的软件可以完成相同的操作。它获取电压波形并显示在屏幕上。...

    2024-01-30 19:47:03
  • 机器学习入门与Python实战(二):回归分析 Regression Analysis

    机器学习入门与Python实战(二):回归分析 Regression Analysis

    现实问题思考现实问题思考--体重预测身高更多因素:性别、所在城市、父母身高等现实问题思考--住宅面积预测售价更多因素:房间数量、房屋年龄、人口密度、交通便利程度等现实问题思考--细菌增长数量预测更多因...

    2024-01-30 19:46:57
  • Redis系列-JAVA与redis整合-JedisPool的使用

    JedisPoolAPI package com.jedis; import java.util.LinkedList; import java.util.List; import java.util.ResourceBundle; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; im

    2024-01-30 19:46:49
  • Java集合

    【代码】Java集合。

    2024-01-30 19:46:41