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

js鼠标事件

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

18.2K40

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.7K30
您找到你想要的搜索结果了吗?
是的
没有找到

js 鼠标事件总结

当监听鼠标事件时,会触发一些事件,我们可以与之交互: mousedown 按下鼠标按钮触发 mouseup 鼠标按钮被释放 click 点击事件 dblclick 双击事件 mousemove 当鼠标移动到元素上时...mouseleave 当鼠标移出一个元素时,mouseleave。类似于mouseout但不冒泡。 contextmenu 快捷菜单当快捷菜单打开时,例如用鼠标右键点击 事件重叠。...例如,在鼠标事件中,我们可以通过检查事件对象的button属性来检查哪个鼠标按钮被按下: const link = document.getElementById('my-link') link.addEventListener...button 如果有按钮,则为鼠标事件触发时按下的按钮数目(通常为0 =主按钮,1 =中按钮,2 =右按钮)。处理由单击按钮引起的事件(例如单击)。...buttons 按钮(如果有),表示在任何鼠标事件上按下的按钮的数字。 clientX / clientY 无论是否滚动,鼠标指针相对于浏览器窗口的x和y坐标。

9.1K40

JS篇(007)-事件委托是什么

答案:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行! 解析: 1、那什么样的事件可以用事件委托,什么样的事件不可以用呢?...- 适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。...- 值得注意的是,mouseover 和 mouseout 虽然也有事件冒泡,但是处理它们的时候需要特别的注意,因为需要经常计算它们的位置,处理起来不太容易。...3、事件冒泡与事件委托的对比 - 事件冒泡:box 内部无论是什么元素,点击后都会触发 box 的点击事件 - 事件委托:可以对 box 内部的元素进行筛选 4、事件委托怎么取索引?...:keydown keypress keyup - 鼠标事件:mousedown mouseup mousemove mouseout mouseover

1.7K10

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

event.cancelBubble = true; };//以上是阻止冒泡的判断语句 menu.style.display = "block"; //添加键盘事件...)和addEventListener(通用浏览器中添加事件监听器)。...二、 展开菜单之后,在document对象上绑定keyup事件,(键盘事件不是某个具体的对象了,所以要帮到document上面来)按下向下方向键,选中下一个选项,按下向上方向键,选中上一个选项,按下回车键菜单收起...index值将对应的选项设为当前(灰色背景) 5、 按下回车键时将对应选中的选项设为菜单标题,且将所有选项设为无背景,index恢复为-1,菜单收起 注意:没有任何选项被选中时,按下回车键不做任何操作 三、鼠标滑过每个选项时高亮显示...,离开时去掉背景,点击高亮选项时菜单标题改变 提示: 1.遍历所有a标签,绑定鼠标点击的事件 注意:要考虑到浏览器兼容,使用innerHTML,不要使用innerText 四、点击页面空白处收起菜单

3.2K50

JS 和 Node.js 中的“事件驱动”是什么意思?

事件驱动如何用于 Node.js? Node.js 是用于基于 V8 引擎的运行在浏览器之外(命令行工具和服务器端)的 JavaScript 环境。...你在 Node.js 中所做的大部分工作都是基于事件的。总会有一个发送器对象,一些观察者在监听消息。...在 Node.js 中,没有任何 HTML 元素,因此大多数事件都来自进程、与网络的交互、文件等。...Node.js 中的每个事件发送器都有一个名为 on 的方法,该方法至少需要两个参数: 要侦听的事件的名称 监听器函数 让我们举一个实际的例子。...再次强调,事件驱动、发布-订阅和观察者的模式并非完全相同:事件驱动的体系结构建立在发布-订阅之上,观察者模式比 DOM 和 Node.js 事件更丰富。 但他们都是属于同一个家庭的成员。

8.4K20

浅谈JavaScript的事件事件类型)

DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发;焦点事件,元素获得或失去焦点触发;鼠标事件,用户通过鼠标在页面上执行操作时触发;滚轮事件,使用鼠标滚轮时触发;文本事件,当在文档中输入文本时触发...1 var sc = document.createElement("script"); 2 sc.src="js/checkboxdemo.js"; 3...鼠标与滚轮事件   鼠标事件是WEB开发中最常用的事件。...鼠标滚轮事件就是mousewheel事件,这个事件跟踪鼠标滚轮。...键盘与文本事件   用户在使用键盘时会触发键盘事件,有3个事件:keydown事件,当用户按下键盘上任意键时触发,如果按住不放会重复触发此事件;keypress事件,当用户按下键盘上的字符键时触发,如果按住不放会重复触发此事件

1.8K50

简简单单实现画笔工具,轻松绘制丝滑曲线

然后按住鼠标不放,进行拖拽。 我们监听鼠标移动事件,如果是 “拖拽状态”,我们通过鼠标事件拿到最新的鼠标位置,保存起来。 鼠标移动事件会在鼠标移动时按较小的间隔不断触发,于是我们能拿到一个个的点。...浏览器会在鼠标移动时按照特定的频率触发鼠标事件。 移动得慢,会拿到密集的点,移动得快,就会拿到稀疏的点。...算法 这里我就想到了 paper.js 的 path.simplify(tolerance)。该方法的作用就是曲线拟合,将一个复杂的 path 简化为数据量更少形状更平滑的 path。...关注公众号,回复 ”曲线拟合“,获取《Graphics Gems》电子书 paper.js 的方法很好,但它的这个算法是和 paper.js 对象耦合在一起的,我不好抽出来,有一些工作量。...更进阶的,可以像 paper.js 一样尝试去改进算法,甚至融合创造新的算法。 其它 这里的画笔工具,思路是在绘制折线后做一个曲线拟合,将线条做平滑处理。

11510

IDE工具、文本编辑器的列块编辑模式

Eclipse Alt + Shift + A启用列块编辑模式 按住鼠标左键选定区域 Alt + Shift + A关闭列块编辑模式 IntelliJ IDEA 按住Alt,接着按住鼠标左键不放,拖动鼠标选定要同时编辑的区域...Notepad++ 两种方法: 按住Alt,接着按住鼠标左键不放,拖动鼠标选定要同时编辑的区域。 按住Alt + Shift,然后用键盘的上下左右箭头进行选定区域。...EditPlus 两种方法: 菜单:编辑 -> 选择 -> 列选择 使用快捷键Alt + C,接着移动鼠标或键盘上下左右键选定区域。 注意:在自动换行的模式下是不行的,改为不自动换行就行了。...可以参考设置自动换行的方法:EditPlus 3:设置自动换行 EmEditor 按住Alt + C不放,然后用鼠标选定区域。 LiteEdit 按住Alt不放,然后用鼠标进行列块选择。...点击菜单上的“列块选择”后用鼠标进行列块选择。 参考链接 notepad++如何使用列块编辑模式?

1.1K30

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY「建议收藏」

MouseEvent的类别有以下: mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过...mouseout 鼠标滑出 mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单 注意: 执行顺序:mousedown —> mouseup —> click...区别:mouseover和mouseout子元素也会触发,可以冒泡触发 区别:mouseenter和mouseleave是针对侦听的对象触发,阻止了冒泡 阻止鼠标的默认事件 e.preventDefault...() e.returnValue=false;//IE8 及以下兼容写法 return false;//IE兼容写法,只用作on事件阻止默认事件 去除单击右键菜单 document.body.addEventListener...左键对应的值为 0、1、1 中键对应的值为 1、4、2 右键对应的值为 2、2、3 timeStamp 从页面打开开始到触发事件的时间 以下内容为坐标值的说明: clientX和clientY与

2.6K20

【D3.js - v5.x】(3)Update & Enter & Exit | 交互 | 布局

添加交互 https://www.d3js.org.cn/document/d3-selection/#handling-events 对某一元素添加交互操作十分简单,代码如下: var circle...鼠标常用的事件有: click:鼠标单击某元素时,相当于 mousedown 和 mouseup 组合在一起。 mouseover:光标放在某元素上。...mousemove:鼠标被移动的时候。 mousedown:鼠标按钮被按下。 mouseup:鼠标按钮被松开。 dblclick:鼠标双击。...键盘常用的事件有三个: keydown:当用户按下任意键时触发,按住不放会重复触发此事件。...该事件不会区分字母的大小写,例如“A”和“a”被视为一致 keypress:当用户按下字符键(大小写字母、数字、加号、等号、回车等)时触发,按住不放会重复触发此事件

23910

图形编辑器开发:最基础但却复杂的选择工具

对于一个图形设计软件,它最基础的工具是什么?选择工具。 但这个选择工具,却是相当的复杂。这次我来和各位,细说细说选择工具的一些弯弯道道。...注意是在鼠标按下时就按住 同时也要 支持取消选中:原来被选中的一个图形,我按住 Shift 再 代码的核心逻辑是: 如果这个图形不在 selectSet 中,将其加入;如果这个图形在 selectSet...移动的交互过程: 光标停留在已经被选中的图形上,按下鼠标不放; 然后拖拽鼠标,被选中图形跟随光标移动; 释放鼠标,表示移动到目标位置,移动结束。...// 图形移动前位置 let elStartCoords = []; // 鼠标按下事件的光标位置,计算偏移量时作为基准 let startCoord = { x: undefined, y: undefined...要点: 拖拽的中途从没按住 Shift 到按住,要立即响应,代码实现上要补一个键盘事件监听,而不是靠鼠标移动事件,因为你不移动鼠标,被选中元素就不会更新。 比较 dx 和 dy 的大小。

31330

【opencv小项目】深入理解回调函数

回调函数不是由该函数的实现方法直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。...如果你学过单片机,那你可以将鼠标回调函数理解为单片机的中断函数 运行机制: ⑴定义一个回调函数; ⑵函数实现的一方在初始化的时候,将回调函数的函数指针注册给调用者; ⑶当特定的事件或条件发生的时候,调用者使用函数指针调用回调函数对事件进行处理...ctrl不放 EVENT_FLAG_SHIFTKEY 按住shift不放 EVENT_FLAG_ALTKEY 按住alt不放 下面以一学妹的程序来说一下做这个题的大体思路: 首先我们应该读取一张图片并将他显示出来...程序如下(详细注释): //@event:鼠标事件标志(不需要自己传参) //@x:鼠标在窗口中的x坐标 //@y:鼠标在窗口中的y坐标 //@flags:自定义的宏,做标记符,Ture时开始绘制矩形...int x, int y, int flags, void* param) { Mat& image = *(Mat*)param; switch (event) { //检查鼠标事件

1.3K40
领券