首页 > 其他分享 >mouse事件

mouse事件

时间:2023-05-14 22:00:13浏览次数:35  
标签:触发 鼠标 元素 定点 设备 mouse 事件

mouse事件

​ mousedown事件

​ 事件在定点设备(如鼠标或触摸板)按钮在元素内按下时,会在该元素上触发

​ 其是在按下那一刻触发

​ mouseup事件

​ 事件在定点设备(如鼠标或触摸板)按钮在元素内释放时,在该元素上触发

​ mouseenter事件

​ 事件在定点设备上(通常指鼠标)首次移动到元素的激活区域内时,在该元素上触发

​ 其是在鼠标移入指定区域内触发

​ mouseleave事件

​ 事件在定点设备上(通常是鼠标)的指针移出某个元素时触发

​ 其是在鼠标移出某个元素时触发

​ mouseleave 不会冒泡 !!!

​ mousemove事件

​ 事件在定点设备(通常指鼠标)的光标在元素内移动时,会在该元素上触发

​ 其是在鼠标在元素内移动时触发

​ mouseout事件

​ 事件在定点设备(通常是鼠标)移动至元素或其子元素之外时,会在该元素上触发

​ mouseout会冒泡 !!!

​ mouseover事件

​ 一个点定设备(通常指鼠标)在一个元素本身或者其子元素上移动时,mouseover 事件在该元素上触发

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: orangered;
        }
    </style>
</head>

<body>
    <button>下拉</button>
    <button>上拉</button>
    <button>切换</button>
    <div></div>
    <script src="./jquery.min.js"></script>
    <script>
        document.querySelectorAll("button")[0].addEventListener("mouseup", () => {
            document.querySelector("div").style.display = "none"
        })
    </script>
</body>

</html>

标签:触发,鼠标,元素,定点,设备,mouse,事件
From: https://www.cnblogs.com/Agiser0/p/17400362.html

相关文章

  • 事件循环机制
    事件循环是JavaScript的一种执行机制,用于协调异步任务的执行顺序、传递消息以及处理用户交互等事件。事件循环由以下四个组成部分组成。调用栈(CallStack):调用栈是JavaScript的一种执行机制,用于控制函数的执行顺序。当函数被调用时,将函数压入调用栈中,并开始执行函数,函数执行......
  • QAbstractEventDispatcher 抽象事件分发类
     QAbstractEventDispatcherQAbstractEventDispatcher是一个抽象事件分发类,提供了一个事件循环,并将事件分发给相应的对象。主要职责有:1.管理一个事件循环,接收各种事件并分发2.提供注册,注销事件等接口3.处理定时器,到期后触发timeout信号4.处理异步信号连接,将其包装为事件......
  • 【控制】事件触发机制下带领导者的多智能体最优控制附matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • 雨中冒险2 按键未绑定 鼠标无法移动镜头 解决方案 Risk of Rain 2 NO GAMEPAD BINDIN
    兄弟萌,检查你的.xml用户配置文件一般在这个目录下Steam\userdata\385903137\632360\remote\UserProfiles然后用记事本或者vscode等工具打开,还原这三个配置UserProfile>joystickMap,keyboardMap,mouseMap如果没有备份过,那可以试试我的。不要将内容换行! checkyour.xmluse......
  • NET Core 事件总线,分布式事务解决方案:CAP
    转载:https://blog.csdn.net/WuLex/article/details/1245648311.事件总线概念事件总线是一种事件发布/订阅结构,通过发布订阅模式可以解耦不同架构层级,同样它也可以来解决业务之间的耦合,它有以下优点松耦合横切关注点可测试性事件驱动事件总线类型进程内事件(Event):本地事件,它......
  • 《asyncio 系列》11. asyncio 的并发原语(锁、信号量、事件、条件)
    楔子使用多线程和多进程编写应用程序时,需要考虑非原子操作时的竞态条件,因为即使是并发增加整数这样简单的操作也可能导致微妙的、难以重现的bug。而asyncio是单线程的(除非与多线程和multiprocessing进行交互),这是否意味着我们就可以不必考虑竞争条件呢?事实证明,事情并非那么简......
  • Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consid
    这个警告意味着在事件监听器中,添加了一个阻止页面滚动的`mousewheel`事件,但是该事件监听器并没有标记为被动事件监听器(passiveeventlistener)。这可能会导致页面滚动变得不流畅,特别是在移动设备上。为了解决这个问题,您需要将事件监听器标记为被动事件监听器。具体实现方法如下......
  • el-autocomplete select事件传递多个参数
    问题<el-autocompletev-model="state":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"></el-autocomplete>这是ElementUI官方文档中 el-autocomplete 的示例,而这里的 handleSelec......
  • Zookeeper中watcher介绍-通知状态事件类型
    1.ZookeeperWatcher简介1.1)提供了分布式数据发布、订阅功能。1.2)引入了watcher机制来实现这种分布式的通知功能(主要触发事件:节点创建、节点删除、节点改变等)。1.3)watcher包括以下三个过程:客户端向服务端注册watcher、服务端事件发生触发watcher、客户端回调watcher得到触发事......
  • 事件的相互独立性
    模块导图知识剖析事件的相互独立性①独立事件对任意两个事件\(A\)与\(B\),如果\(P(AB)=P(A)P(B)\)成立,则我们称事件\(A\)与事件\(B\)相互独立,简称独立. ②\(n\)个事件独立\(n\)个事件\(A_1\),\(A_2\),…,\(A_n\)两两独立时,等式\(P(A_1A_2\cdot\cdot\cdotA_n)=P(A_1......