文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

十九、简易绘画板制作

以下将列举出来： EVENT_MOUSEMOVE：鼠标滑动 EVENT_LBUTTONDOWN：左键单击 EVENT_RBUTTONDOWN：右键单击 EVENT_MBUTTONDOWN：中间单击 EVENT_LBUTTONUP...：左键释放 EVENT_RBUTTONUP：右键释放 EVENT_MBUTTONUP：中键释放 EVENT_LBUTTONDBLCLK：左键双击 EVENT_RBUTTONDBLCLK：右键双击 EVENT_MBUTTONDBLCLK...，并且当事件为EVENT_MOUSEMOVE时将会输出事件名以及当前鼠标所在的x和y坐标的位置。...我们正常进行拖拽画矩形，一般是按下左键，并且不放手，移动鼠标进行矩形的绘制，直到拖拽至我们觉得合适的位置后，我们开始松开鼠标。 在以上的绘制行为中，一共有几个鼠标事件。...那是因为我们按下了鼠标左键后的那个点是绘制起始点，从那个点开始绘制矩形到当前鼠标移动到的x和y坐标处，这样由于每次都覆盖掉原来的图像造成一种错觉，就是在拖拽进行绘制图像，并且进行填充，颜色为(0,255,0

1.7K10

JavaScript鼠标事件细讲：执行顺序+注意事项+区别比对

常见的鼠标事件有click：单击鼠标左键时发生。...当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事dblclick：双击鼠标左键时发生，如果右键也按下则不会发生contextmenu ：弹出右键菜单。...(想要阻止mouseover的冒泡事件就用mouseenter)mouseenter/mouseover共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.总结就是...以下就是W3C的标准现范：按下左键按下中键按下右键当然微软是不会妥协的，因为e.button本来就是微软最先实现的，网景用的是e.which，但相对而言，微软的复杂多了。...0：没有键被按下1：按下左键2：按下右键3：左键与右键同时被按下4：按下中键5：左键与中键同时被按下6：中键与右键同时被按下7：三个键同时被按下参考文章：JS鼠标事件（非常详细） http://c.biancheng.net

5.1K21
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    事件对象的使用、属性和方法

    事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁 4 jQuery事件对象的作用 li都有一个共同的父元素，而且所有的事件都是一致的...，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 7 event.preventDefault()阻止默认行为，在执行这个方法后...()阻止事件冒泡，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数 9 event.which获取在鼠标单击时，单击的是鼠标的哪个键 10 event.which...将 event.keyCode 和 event.charCode 标准化了，event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告...this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素 13 .this和event.target都是dom对象，使用jquey中的方法可以将他们转换为

    2.2K30

    使用鼠标

    现在我们常见的三键鼠标, 三个按键分布称为左键、中键和右键, 其中左键的标识符简写为LBUTTON, 中键的标识符为MBUTTON, 右键的标识符为RBUTTON。...双键鼠标只有左键和右键, 单键鼠标只有左键。 3>....示例二: 处理鼠标左键单击事件         鼠标左键在客户区被单击时发来的消息: WM_LBUTTONDOWN 1 switch(message) 2 { 3 case...鼠标单击         鼠标在客户区单击时各个鼠标按键所产生的消息如下: 鼠标按键 按下时产生的消息 释放时产生的消息 左键 WM_LBUTTONDOWN WM_LBUTTONUP 中键 WM_MBUTTONDOWN...WM_MBUTTONUP 右键 WM_RBUTTONDOWN WM_RBUTTONUP 　　　　示例2中已经演示了一个处理鼠标左键单击的示例, 对于中键和右键处理的方法是相同的, 只要等待Windows

    3.6K100

    WEB入门之十四 jQuery事件

    当按下鼠标左键时记录鼠标位置作为起始位置；当鼠标移动时一直记录鼠标的当前位置；当松开鼠标左键时记录鼠标位置作为结束位置。...属性 说明 type 获取事件类型 target 获取触发事件的元素 result 获取上一个事件处理函数返回的值 which 获取在鼠标单击事件中获取鼠标的按键，值1表示鼠标左键；值2表示鼠标中键；值...3表示鼠标右键 pageX/Y 获取事件发生时相对于页面的坐标 keyCode 获取在键盘事件中键盘对应的键值 screenX/Y 获取事件发生时相对于屏幕的坐标 data 事件发生时传递的参数的信息都保持在该属性中...5.3.1 hover事件 该事件用来模拟鼠标悬停事件，当鼠标移到元素上时会触发第1个函数的执行；当鼠标移出这个元素时会触发第2个函数的执行。...一次移除多个事件，中间用空格隔开 $("p").die("click mouseover"); //移除段落元素的鼠标单击事件和鼠标悬浮事件 5.4.3 on和off on是jQuery 1.7版本中新增的函数

    1.8K10

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

    MouseEvent的类别有以下： mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过...区别：mouseover和mouseout子元素也会触发，可以冒泡触发 区别：mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡 阻止鼠标的默认事件 e.preventDefault...左键对应的值为 0、1、1 中键对应的值为 1、4、2 右键对应的值为 2、2、3 timeStamp 从页面打开开始到触发事件的时间 以下内容为坐标值的说明： clientX和clientY与...x，y clientX和clientY与x，y一样的，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x,y是新浏览器支持 以下截图打印的结果都是div2元素的左上顶点（从边框开始）的位置坐标...body的左上角为原点： 当元素的父级都有定位属性时，以父级的左上角为原点： 当元素自身有定位属性时，以自身的左上角为原点： pageX， pageY pageX， pageY

    4.5K20

    WEB入门之十四 jQuery事件

    当按下鼠标左键时记录鼠标位置作为起始位置；当鼠标移动时一直记录鼠标的当前位置；当松开鼠标左键时记录鼠标位置作为结束位置。...属性​ ​说明​ type 获取事件类型 target 获取触发事件的元素 result 获取上一个事件处理函数返回的值 which 获取在鼠标单击事件中获取鼠标的按键，值1表示鼠标左键；值2表示鼠标中键...；值3表示鼠标右键 pageX/Y 获取事件发生时相对于页面的坐标 keyCode 获取在键盘事件中键盘对应的键值 screenX/Y 获取事件发生时相对于屏幕的坐标 data 事件发生时传递的参数的信息都保持在该属性中...5.3.1 ​hover事件​ 该事件用来模拟鼠标悬停事件，当鼠标移到元素上时会触发第1个函数的执行；当鼠标移出这个元素时会触发第2个函数的执行。...一次移除多个事件，中间用空格隔开 $("p").die("click mouseover"); //移除段落元素的鼠标单击事件和鼠标悬浮事件 5.4.3 ​on和off​ on是jQuery 1.7

    1.9K10

    Selenium系列（四） - 详细解读鼠标操作

    bbb ccc 背景 用selenium做自动化，有时候会遇到需要模拟鼠标操作才能进行的情况...，比如单击、双击、点击鼠标右键、拖拽等等。...而selenium给我们提供了一个类来处理这类事件—— ActionChains 有哪些鼠标操作呢？ 执行操作 左键、右键单击、双击 鼠标悬停到元素、偏移处 长按 拖动 点击右边目录即可跳转哦！...-------------->>>>>>>>>> 执行操作 perform() 方法 主要是调用其他操作方法后，都要再次调用这个方法，表示执行某个鼠标操作，后面会有例子 左键、右键单击、双击 from...(password).perform() 鼠标悬停到元素、偏移处 # 悬停到设置按钮 chains.move_to_element(login_btn).perform() # 悬停到指定偏移量 chains.move_to_element_with_offset

    74310

    ug4入门教程

    1.4  UG NX中鼠标的应用 使用UG时，应该选用含有3键功能的鼠标。在UG的工作环境中，鼠标的3个按键即左键MB1、中键MB2、右键MB3均含有其特殊的功能。...2．中键（MB2） 在对话框中，单击中键相当于单击对话框中的默认按钮（通常为“确定”），可以提高操作速度。...在绘图区中按住鼠标中键并拖动可以旋转视角；同时按住鼠标中键和左键并拖动，可以缩放视图；同时按住鼠标中键和右键并拖动，可以平移视图。...3．右键（MB3） 单击鼠标右键（MB3），会弹出快捷菜单，菜单内容依鼠标单击位置的不同而不同。...（2）若在绘图区的图素上单击鼠标右键，则会弹出属性按钮，如图1-11（a）所示；而在进行各个命令操作时，则会弹出与命令相对应的内容，如图1-11（b）所示为绘制直线捕捉点的快捷菜单。

    4.6K30

    Fabric.js 右键菜单

    案例代码放了在文末~ 环境和版本 Chrome浏览器版本：96.0.4664.45 Fabric.js版本：4.6.0 思路 先说说需求： 右键单击元素，弹出菜单； 弹出菜单分4种情况（菜单在鼠标右侧...，菜单在鼠标左侧，菜单在鼠标上方，菜单在鼠标下方）； 左键单击画布其他地方，隐藏菜单； 实现思路： 创建画布； 创建 “菜单” 的DOM元素； 去官网查找 “右键相关事件”； 右键单击在元素上，根据鼠标离画布边缘的距离...，计算菜单要显示的位置； 左键单击在画布上，隐藏菜单； 实现 查文档 在上面的思路中，其实难点只有 “右键相关事件” 。...:down 事件里有个 button 属性： 左键：button 的值为 1 右键：button 的值为 3 中键（也就是点击滚轮），button 的值为 2，前提需要设置 fireMiddleClick...// 判断：右键，且在元素上右键 // opt.button: 1-左键；2-中键；3-右键 // 在画布上点击：opt.target 为 null if (opt.button =

    9.1K10

    python selenium定位元素

    (source,target) 拖动鼠标，源元素按下左键移动至目标元素释放 move_to_element(elem) 鼠标移动到一个元素上 click_and_hold(elem) 按下鼠标左键在一个元素上...失败) alert.switch_to_alert() alert.accept() Actions action = new Actions(driver);action.click();// 鼠标左键在当前停留的位置做单击操作...driver); action.contextClick();// 鼠标右键在当前停留的位置做单击操作 action.contextClick(driver.findElement(By.name(...element)))// 鼠标右键点击指定的元素 鼠标双击 Actions action = new Actions(driver); action.doubleClick();// 鼠标在当前停留的位置做双击操作...();// 鼠标悬停在当前位置，既点击并且不释放 action.clickAndHold(onElement);// 鼠标悬停在 onElement 元素的位置 鼠标移动 Actions action

    2.3K40

    JavaScript 事件对象

    那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。 1.鼠标按钮 只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发click事件，因此检测按钮的信息并不是必要的。...非IE(W3C)中的button属性 值 说明 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的鼠标按钮(鼠标滚轮按钮) 2 表示次鼠标按钮(常规一般是鼠标右键) IE中的button属性 值...说明 0 表示没有按下按钮 1 表示主鼠标按钮(常规一般是鼠标左键) 2 表示次鼠标按钮(常规一般是鼠标右键) 3 表示同时按下了主、次鼠标按钮 4 表示按下了中间的鼠标按钮 5 表示同时按下了主鼠标按钮和中间的鼠标按钮...6 表示同时按下了次鼠标按钮和中间的鼠标按钮 7 表示同时按下了三个鼠标按钮 PS：在绝大部分情况下，我们最多只使用主次中三个单击键，IE给出的其他组合键一般无法使用上。...Boolean 读/写 默认值为true，但将其设置为false就可以取消事件的默认行为 srcElement Element 只读 事件的目标 type String 只读 被触发的事件类型 在这里

    2.5K100

    selenium源码通读·5 |webdrivercommonaction_chains.py-ActionChains类分析

    1 源码路径selenum/webdriver/common/action_chains.py图片2 功能描述提供鼠标操作，模拟用户的鼠标行为；如鼠标的各种单击、双击、滑动、拖拽等操作。..., on_element=None)单击元素，如果元素没有，单击当前鼠标位置click_and_hold(self, on_element=None)鼠标左键按住某个元素，如果有on_element则点击...，如果没有则默认点击鼠标所在位置context_click(self, on_element=None)右键单击，如果有on_element则点击，如果没有则默认点击鼠标所在位置double_click...， 即用鼠标把一个元素拖到另一个元素上drag_and_drop_by_offset(self, source, xoffset, yoffset) 鼠标左键拖拽， 鼠标从源元素拖拽到源元素的x，y轴偏移量上并释放鼠标...，将鼠标移动到当前位置的xy偏移量move_to_element(self, to_element)鼠标悬停在当前元素上move_to_element_with_offset(self, to_element

    727130

    Python 图形化界面基础篇：处理鼠标事件

    它提供了一组工具和组件，用于构建窗口、按钮、标签、文本框等 GUI 元素，并且支持事件处理机制，可以监听和响应用户的交互操作。...Tkinter 提供了几种常见的鼠标事件，如 （左键单击）、 （中键单击）、 （右键单击）等。...我们可以为 Canvas 画布绑定这些事件，并在事件发生时执行相应的操作。...然后，我们使用 bind 方法将左键单击事件 "" 绑定到 Canvas 画布上，以便在鼠标左键单击时调用 left_click 函数。...鼠标事件是 GUI 应用程序中常见的交互方式，通过捕获和处理这些事件，我们可以实现各种交互功能。 Tkinter 库提供了丰富的工具和方法，用于处理鼠标事件，包括单击、双击、移动、释放等。

    3.2K30

    【从零学习OpenCV 4】鼠标响应

    表示按下鼠标左键 EVENT_RBUTTONDOWN 2 表示按下鼠标右键 EVENT_MBUTTONDOWN 3 表示按下鼠标中键 EVENT_LBUTTONUP 4 表示释放鼠标左键 EVENT_RBUTTONUP...5 表示释放鼠标右键 EVENT_MBUTTONUP 6 表示释放鼠标中键 EVENT_LBUTTONDBLCLK 7 表示双击鼠标左键 EVENT_RBUTTONDBLCLK 8 表示双击鼠标右键...程序中如果鼠标右键被按下，则会提示“点击鼠标左键才可以绘制轨迹”，点击左键会输出当前鼠标的坐标，并将该点坐标定义为某段轨迹的起始位置。之后按住左键移动鼠标，会进入到第三个逻辑判断，绘制鼠标的移动轨迹。...第二种绘制轨迹的方式是在前一时刻和当前时刻鼠标位置间绘制直线，这种方式可以避免因鼠标移动过快而带来的轨迹出现断点的问题。程序运行结果在图3-35给出。...if (event == EVENT_RBUTTONDOWN) //单击右键 30. { 31.

    1.5K40

    ubuntu快捷键设置大全

    压着shift拖动窗口可以让窗口吸附在屏幕的边缘 鼠标左右两键同时按，其效果相同于中键。 还有要使用滚动条移动页面时，鼠标的左、右、中键都有不同效果。...自己试试，如右键只在凸起位置上按才有效果、在滚动条的凸出或平坦位置上按中键拖曳，效果与左键并不相同。 可以在窗口任一位置上拖曳，按着Alt键拖曳。...可以按Tab的的地方也可以按住Shift键，有类似的作用 左键+快捷键拖放，ctrl, alt, shift, crtl+shift nautilus中中键双击文件夹是打开在新窗口，和shift+左键同等效...，ctrl+左键是选中，如果你选择了单击打开文件，那么ctrl+左键很实用。...10、鼠标中键直接单击 滚动条 的空白处，屏幕即滚动到那处。 11、快速粘贴：先在一个地方选中文字，在欲粘贴的地方按鼠标 中键 即可。 12、等效中键：a 、按下滑轮等效于中键。

    3K30

    Selenium3源码之common下action_chains.py模块分析

    这对于执行更复杂的操作(如鼠标悬停、拖放)非常有用。 该模块源码是掌握selenium必须阅读和掌握的！！！...click(self, on_element=None) 鼠标左键单击 鼠标操作 def click_and_hold(self, on_element=None) 鼠标左键按键，不释放 鼠标操作 def..._actions: action() click函数 用于实现模拟鼠标左键单击动作 def click(self, on_element=None): """ 模拟鼠标左键单击...:参数说明: - on_element: 鼠标要单击的目标元素....总体的代码实现这里未深入解析其上下和相互的调用逻辑，但本文所演示的基本分析足够一个软件测试人员来进一步了解和学习，关键还是在于自身去熟悉和阅读源码，克服代码阅读的陌生感，为后续深入实战打下基础。

    96460
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券