88事件分类——鼠标事件

最新推荐文章于 2023-08-06 20:23:54 发布
最新推荐文章于 2023-08-06 20:23:54 发布
阅读量1.5k 收藏 8
点赞数 1
分类专栏： javascript学习园地 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47197906/article/details/121599862
版权

文章目录

1、常用事件

鼠标事件是Web开发中最常用的一类事件。
例如，鼠标滑过时，切换Tab栏显示的内容；利用鼠标拖拽曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件。
在这里插入图片描述

2、鼠标拖曳特效

在Web开发中，为了提供良好的用户体验，经常会对页面中弹框提供可拖拽的特效。
在这里插入图片描述

编写HTML页面

在这里插入图片描述

编写CSS

在这里插入图片描述
在这里插入图片描述

鼠标拖拽原理

根据鼠标的移动位置来计算盒子的移动位置。首先，要通过CSS样式为盒子设置定位，否则即使通过JavaScript代码修改盒子的位置也无法完成移动。
在这里插入图片描述
盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。

处理鼠标按下事件

在这里插入图片描述

处理鼠标移动事件

在这里插入图片描述
最后一行代码是当用户在拖拽条的文字上快速拖动时，避免选中上面的文本。
为了使用户体验更好，在鼠标大幅度进行移动时，也能实现拖拽效果，故为document文档绑定鼠标移动事件。

处理释放鼠标按键的事件

用户松开鼠标按键后，依然可以进行拖拽。
故实现鼠标按钮松开后，弹框不再移动。
在这里插入图片描述

处理关闭弹框事件

在这里插入图片描述

远近2021
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
互联网思维是常识的回归——周鸿祎
03-03
——周鸿祎第一，用户至上。用户不是客户。互联网讲的不是把东西卖给谁，而是如何提供有价值的服务，和我的用户永远保持连接。我与用户之间不是一锤子买卖，而是长期的关系。在互联网上聚集越多的用户，就会产生越大...
web之鼠标悬浮，鼠标移入和鼠标移出、hover、onmouseover、onmouseout、getElementById、mouseenter、mouseleave
“代码农”微信公众号
08-19 3158
web之鼠标悬浮，鼠标移入和鼠标移出、hover、onmouseover、onmouseout、getElementById、mouseenter、mouseleave
Web APIs：事件高级--鼠标事件
薛定谔的猫
10-22 494
④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的 top和left 值就可以移动图片。正常情况下：我们可以右击菜单和选中文字，但是当我们阻止了它的默认事件，它将无法右键和选中。现在图片是无法移动的，这是因为top:50px 而我们只不过是给了它50却没有给他px。对象代表事件的状态，跟事件相关的一系列信息的集合。① 鼠标不断的移动，使用鼠标移动事件： mousemove。③ 图片要移动距离，而且不占位置，我们使用绝对定位即可。现在图片是能以移动了，但是在鼠标的左上角。
事件类型—鼠标事件
雷雨天的雷胖子
05-14 4821
目录 一、事件分类 二、事件顺序 三、事件对象 坐标属性 修改键属性 relatedTarget属性 button属性 四、事件应用 一、事件分类 鼠标事件共有11种类型，分别是click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave和onmou...
鼠标事件（事件类型）
dp1997的博客
03-01 3897
鼠标.键盘.常用的事件（事件类型） 常见的几种鼠标事件有以下几种 click：当用户单击鼠标按下回车键时触发。 mousedown：当用户按下了鼠标还未弹起时触发。 mouseup：当用户释放鼠标按钮时触发。 dblclick：当用户双击鼠标按钮时触发。 contextmenu ：弹出右键菜单。 mouseover：鼠标移到目标的上方。 mouseout：当鼠标移出某个元素上移动时触发。 mous...
鼠标事件
段位十足的博客
09-08 2510
click：单击事件。 dblclick：双击事件。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：鼠标移动事件。 mouseover：移入事件。 mouseout：移出事件。 mouseenter：移入事件。 mouseleave：移出事件。 contextmenu：右键事件。 mouseover事件和mouseenter事件，都是鼠标进...
计算机基础关键字汇总——计算机资料文档.docx
06-04
DRAM 静态随机 SRAM 内存 RAM 高速缓冲、性质RAM、位于CPU中 Cache 扇区 512字节 磁介质 软盘、硬盘 光介质 光盘或VCD或DVD 光盘分类 CD-R和CD-RW 半导体外存 U盘（即插即用） 输入设备 键盘、鼠标、扫描仪 输出设备...
《信息新技术——计算机的硬件与软件》教学设计.docx
05-26
二、学情分析 本节课授课对象是七年级学生，小学阶段已经对计算机的外观，鼠标、键盘等硬件设备有了一些了解，本节课主要是深入到内部的结构，学生对计算机的系统组成、主机箱内部结构认识不清晰，对计算机的神秘感...
JavaScript特效代码集——rar
05-19
时间日期分类 鼠标事件类 状态栏特效类 页面效果类 图形图像类 按钮特效类 ......
体感画板——基于外接摄像头追踪物件（Python-Opencv库）.zip
最新发布
04-06
HighGui：提供图形用户界面（GUI）支持，如图像和视频的显示、用户交互（如鼠标事件处理）以及简单的窗口管理。 VideoIO：负责视频的读写操作，支持多种视频格式和捕获设备。 Objdetect：包含预训练的对象检测...
Web API之鼠标事件
Zhang_YingJie的博客
03-14 982
关于事件的监听，我们可以通过进行监听或者通过元素的属性来指定。接下来的所有事件都可以通过上面两种方式注册。事件的捕获与冒泡 ，现在默认都是冒泡阶段注册事件处理程序。
深入理解DOM事件类型系列第一篇——鼠标事件
weixin_34161064的博客
09-13 271
前面的话 　　鼠标事件是web开发中最常用的一类事件，毕竟鼠标是最主要的定位设备。本文将详细介绍鼠标事件的内容   类型 　　鼠标事件共10类，包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave click 当用户按下并释放鼠...
javascript学习之鼠标事件
白话机器学习
08-06 2586
WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。目前，鼠标滚轮相关的事件只有一个wheel事件，用户滚动鼠标的滚轮，就生成这个事件的实例。浏览器原生提供构造函数，用来生成WheelEvent实例。构造函数可以接受两个参数，第一个是字符串，表示事件类型，对于滚轮事件来说，这个值目前只能是wheel。第二个参数是事件的配置对象。该对象的属性除了EventUIEvent的配置属性以外，还可以接受以下几个属性，所有属性都是可选的。deltaX。
常见的鼠标事件
看到代码头都是大的~
09-05 6579
常见的鼠标事件有：单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、获取焦点、失去焦点等几类。每个事件的写法也都有很多种。 为了方便，我是引入jQuery库进行操作的。 1、单击 写法1：直接使用 <p onclick="alert("单击");">单击</p> 写法2：js调用 <p>单击</p> <script> $('p'...
5种鼠标事件总结
1073960086的博客
12-17 7407
1、onmousemove     鼠标指针进入目标区域触发事件，在目标区域内移动也会触发事件。   2、onmouseenter与onmouseleave     鼠标指针进入目标区域触发事件onmouseenter，离开区域触发onmouseleave，不支持冒泡事件。     鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）      3、onmou...
鼠标事件以及解释
mgaga的博客
11-12 921
click：单击事件。 dblclick：双击事件。 mousedown：按下⿏标键时触发。 mouseup：释放按下的⿏标键时触发。 mousemove：⿏标移动事件。 mouseover：移⼊事件。 mouseout：移出事件。 mouseenter：移⼊事件。 mouseleave：移出事件。 contextmenu：右键事件。 mouseover事件和mouseenter事件，都是⿏标进⼊⼀个节点时触发。两者的区别是，mouseenter事件只触发⼀次，⽽只要⿏标在节点内部移动，
常用的鼠标事件 JavaScript
2202_75549187的博客
04-02 341
常用的鼠标事件
常用的鼠标事件和键盘事件
qq_66198247的博客
07-21 2435
常用鼠标事件。
Js之鼠标事件-鼠标事件
cx1361855155的博客
08-04 9195
鼠标点击事件包括 click（点击），dbclick（双击），mousedown（按下）和 mouseup（松开）四个。其中 click 事件比较常用，而mousedown 和 mouseup事件类型多用于鼠标施放，拉伸操作中。如果从父元素中移动到子元素中，也会触发元素的mouseover事件类型。mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。...
Java 事件处理——ATM 柜员机模拟程序
05-27
好的，Java 事件处理是指通过监听用户的操作事件（如鼠标点击、键盘输入等），并在相应事件发生时执行一定的处理代码来响应用户的操作。下面是一个简单的 ATM 柜员机模拟程序，演示了 Java 事件处理的基本用法： ```java import java.awt.*; import java.awt.event.*; import javax.swing.*; public class ATM extends JFrame implements ActionListener { private JLabel label; private JButton button1, button2, button3; public ATM() { super("ATM"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(300, 200); setLayout(new FlowLayout()); label = new JLabel("请选择操作："); button1 = new JButton("查询余额"); button2 = new JButton("取款"); button3 = new JButton("存款"); add(label); add(button1); add(button2); add(button3); button1.addActionListener(this); button2.addActionListener(this); button3.addActionListener(this); } public void actionPerformed(ActionEvent e) { if (e.getSource() == button1) { label.setText("您的账户余额为1000元。"); } else if (e.getSource() == button2) { label.setText("请输入取款金额："); } else if (e.getSource() == button3) { label.setText("请输入存款金额："); } } public static void main(String[] args) { ATM atm = new ATM(); atm.setVisible(true); } } ``` 这个程序实现了一个简单的 ATM 柜员机界面，包含三个按钮：查询余额、取款、存款。当用户点击这些按钮时，程序会在标签中显示相应的信息。在构造函数中，我们设置了窗口的标题、大小和布局，并创建了标签和按钮，添加到窗口中。然后，我们为每个按钮添加了一个事件监听器，使用 this 关键字表示当前对象，即 ATM 类，在 actionPerformed 方法中根据事件源判断用户点击了哪个按钮，并在标签中显示相应的信息。最后在 main 方法中创建了一个 ATM 对象并显示出来。 这个示例程序虽然简单，但演示了 Java 事件处理的基本用法。在实际开发中，我们可以根据具体需求编写更加复杂的事件处理代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值