首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js鼠标事件

页面加载事件(onload),鼠标双击事件(ondbclick) window.onload=function(){                 //绑定元素,执行对应事件 鼠标双击(ondblclick...(){                     alert('我是双击显示');                 }             } 鼠标摁下(onmousedown)事件(摁下就执行,鼠标无需抬起...                    alert('鼠标抬起提示');                 }             } 鼠标移动(onmousemove)事件             ...('d5').onmousemove=function(){                     alert('鼠标移动提示');                 }             }...)区别:移动事件鼠标只要移动就产生事件,移入事件需要移入到指定对象内才执行事件

18.1K40

js鼠标事件

今天遇到一个非常奇怪而又搞笑事情:给一个a标签添加一个鼠标移动上时给一个事件,我给其添加是一个onMouseMove事件,结果在IE6 7 8 9和GOOLE中都很正常,结果在Firox中出现问题了...这是我遇到第一个在firox中兼容性问题,开始让我很苦恼,不知道什么原因,结果仔细查找,就是onMouseMove事件在日怪。当我给提添加onMouseOver事件时就对了。...鼠标的一些事件如下所示: onMouseOver IE3|N2|O3 当鼠标移动到某对象范围上方时触发事件 onMouseMove IE4|N4|O 鼠标移动时触发事件 onMouseOut IE4...|N3|O3 当鼠标离开某对象范围时触发事件 onKeyPress IE4|N4|O 当键盘上某个键被按下并且释放时触发事件....[注意:页面内必须有被聚焦对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发事件[注意:页面内必须有被聚焦对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发事件

13.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

js 鼠标事件总结

鼠标移动 mouseover 当鼠标移动到一个元素或它一个子元素上时,鼠标悬停。...例如,在鼠标事件中,我们可以通过检查事件对象button属性来检查哪个鼠标按钮被按下: const link = document.getElementById('my-link') link.addEventListener...button 如果有按钮,则为鼠标事件触发时按下按钮数目(通常为0 =主按钮,1 =中按钮,2 =右按钮)。处理由单击按钮引起事件(例如单击)。...buttons 按钮(如果有),表示在任何鼠标事件上按下按钮数字。 clientX / clientY 无论是否滚动,鼠标指针相对于浏览器窗口x和y坐标。...movementX / movementY movementX / movementY鼠标指针相对于最后一个mousemove事件位置x和y坐标。

9K40

常用鼠标事件

1.常用鼠标事件 1.1 案例:禁止选中文字和禁止右键菜单 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认上下文菜单 document.addEventListener...event对象代表事件状态,跟事件相关一系列信息集合。...现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。...这个天使图片一直跟随鼠标移动 案例分析 ① 鼠标不断移动,使用鼠标移动事件: mousemove ② 在页面中移动,给document注册事件 ③ 图片要移动距离,而且不占位置,我们使用绝对定位即可...1px 就会触发这个事件 // 2.核心原理: 每次鼠标移动,我们都会获得最新鼠标坐标, // 把这个x和y坐标做为图片top和left 值就可以移动图片

3.1K10

常用鼠标事件

常用鼠标事件 1 、案例:禁止选中文字和禁止右键菜单    我是一段不愿意分享文字            // 1. contextmenu 我们可以禁用右键菜单...document.addEventListener('selectstart', function(e) {            e.preventDefault();       })     2、 鼠标事件对象...3、 获取鼠标在页面的坐标            // 鼠标事件对象 MouseEvent        document.addEventListener('click', function...(e.clientY);            console.log('---------------------'); ​            // 2. page 鼠标在页面文档x和y坐标...1px 就会触发这个事件       // 2.核心原理: 每次鼠标移动,我们都会获得最新鼠标坐标,            // 把这个x和y坐标做为图片top和left 值就可以移动图片

1.9K20

事件类型之鼠标事件

事件类型之鼠标事件 常见事件类型 事件本质是程序各个组成部分之间一种通信方式,也是异步编程一种实现。...DOM 支持大量事件 鼠标事件 键盘事件 表单事件 窗口事件 焦点/剪贴板事件 网页状态事件 Touch事件 鼠标事件 鼠标事件指与鼠标相关事件,具体事件主要有以下一些。...click:按下鼠标时触发。 dblclick:在同一个元素上双击鼠标时触发。 mousedown:按下鼠标键时触发。 mouseup:释放按下鼠标键时触发。...mousemove:当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。为了避免性能问题,建议对该事件监听函数做一些限定,比如限定一段时间内只能运行一次。...两者区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点上触发多次。

2.4K30

“穿透”层鼠标事件

标题可能不是一读让人容易明白,上张图(转载) 需要实现如下效果,有一个浮动层,需要层级在它之下一个元素也能照常响应相应事件 ?...一个100*100元素,边框为1px solid #406c99,它有两个事件(鼠标移入、鼠标移出): onmouseover="this.style.borderColor='#f00';" onmouseout...="this.style.borderColor='#406c99';" 在不做特殊处理情况下,它事件将会是无法触发,现在想让它正常触发,效果如下: ?...) 2、捕捉事件获取鼠标的位置X、Y,然后触发层级较低元素相应事件 (平时我们用调试工具选取页面中元素,高亮显示区域就是依据这个原理) 优点:兼容各浏览器 缺点:需要编写Javascript,效率并不高...elementFromPoint使用例子(移动鼠标时,如果那一点在某一元素占位区域则添加3像素红色边框,鼠标移开该元素时清除边框) <!

1.6K20

JS-事件鼠标、键盘都能控制下拉选框效果

menu.style.display = "block"; //添加键盘事件 //问题出在按了回车之后,怎么把对应分类内容填进去。...(ie中添加事件监听器方法)和addEventListener(通用浏览器中添加事件监听器)。...提示: 1、点击三角时需阻止事件冒泡 二、 展开菜单之后,在document对象上绑定keyup事件,(键盘事件不是某个具体对象了,所以要帮到document上面来)按下向下方向键,选中下一个选项...、 按下向上方向键时判断index,如若小于等于0则设为菜单选项总数,之后递减index 4、 根据index值将对应选项设为当前(灰色背景) 5、 按下回车键时将对应选中选项设为菜单标题,且将所有选项设为无背景...,index恢复为-1,菜单收起 注意:没有任何选项被选中时,按下回车键不做任何操作 三、鼠标滑过每个选项时高亮显示,离开时去掉背景,点击高亮选项时菜单标题改变 提示: 1.遍历所有a标签,绑定鼠标点击事件

3.2K50

PyQt 键盘事件鼠标事件

PyQt为事件处理提供了两种机制:高级信号和槽机制,以及低级事件处理程序。前者已经介绍过,后者也有涉及,比如我们曾重新实现过窗口部件closeEvent()。...PyQt为拦截和处理事件提供了5种不同方式,这里只介绍最常用头两种方式。 第一种是重新实现特定事件,如键盘和鼠标事件、重绘事件、尺寸大小改变事件等等,处理程序。可参见代码示例。...第二种重新实现event()事件处理程序 。因为在任何特殊事件处理程序被调用前,都会调用event()。...重新实现这个方法,可以允许我们处理那些不能在某一特定事件处理程序(如对Tab键焦点转换行为重新定义)中处理事件,或者实现那些不存在明确事件处理程序事件,比如QEvent.ToolBarChange...当需要重新实现这些处理程序时,可以对所有其它不是自己亲自处理事件调用它们基类实现。 ?

6.2K20
领券