这是我参与「掘金日新计划 · 10 月更文挑战」的第14天,点击查看活动详情 前言 今天记录一下JQery事件,其中包括五部分 鼠标事件 click: 鼠标单击时触发; dblclick:鼠标双击时触发...; mouseenter:鼠标进入时触发; mouseleave:鼠标移出时触发; mousemove:鼠标在DOM内部移动时触发; hover:鼠标进入和退出时触发两个函数,相当于mouseenter...键盘事件 键盘事件仅作用在当前焦点的DOM上,通常是和。 keydown:键盘按下时触发; keyup:键盘松开时触发; keypress:按一次键后触发。...其中,ready仅作用于document对象。由于ready事件在DOM完成初始化后触发,且只触发一次,所以非常适合用来写其他的初始化代码。...('init B...'); }); $(function () { console.log('init C...'); }); 事件参数 有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值
,系统提供的事件类型如下: 枚举对象定义 对应的事件名 事件触发的时机 cc.Node.EventType.MOUSE_DOWN 'mousedown' 当鼠标在目标节点区域按下时触发一次 cc.Node.EventType.MOUSE_ENTER...当鼠标从按下状态松开时触发一次 cc.Node.EventType.MOUSE_WHEEL 'mousewheel' 当鼠标滚轮滚动时 鼠标事件(cc.Event.EventMouse)的重要 API...获取鼠标事件上次触发时的位置对象,对象包含 x 和 y 属性 getDelta Object 获取鼠标距离上一次事件移动的距离对象,对象包含 x 和 y 属性 getButton Number cc.Event.EventMouse.BUTTON_LEFT...y 属性 getLocationX Number 获取触点的 X 轴位置 getLocationY Number 获取触点的 Y 轴位置 getPreviousLocation Object 获取触点上一次触发事件时的位置对象...,对象包含 x 和 y 属性 getStartLocation Object 获取触点初始时的位置对象,对象包含 x 和 y 属性 getDelta Object 获取触点距离上一次事件移动的距离对象,
当我们将元素绑定这些事件时,有一个事件对象将会作为参数传递给回调函数,通过事件对象,我们可以获取到当前鼠标的精确位置,鼠标位置信息是实现拖拽的关键。...6、拖拽的原理 当事件触发时,我们可以通过事件对象获取到鼠标的精切位置。这是实现拖拽的关键。...当鼠标按下(mousedown触发)时,我们需要记住鼠标的初始位置与目标元素的初始位置,我们的目标就是实现当鼠标移动时,目标元素也跟着移动,根据常理我们可以得出如下关系: 移动后的鼠标位置 - 鼠标初始位置...= 移动后的目标元素位置 - 目标元素的初始位置 如果鼠标位置的差值我们用dis来表示,那么目标元素的位置就等于: 移动后目标元素的位置 = dis + 目标元素的初始位置 通过事件对象,我们可以精确的知道鼠标的当前位置...,因此当鼠标拖动(mousemove)时,我们可以不停的计算出鼠标移动的差值,以此来求出目标元素的当前位置。
这里我使用了三组数据,分别是:鼠标按下的起始位置、鼠标当前的位置、是否处于捕获中状态。...在本例中,我们的操作行为是按下鼠标开始截取区域,移动过程中界面绘制开始点和当前鼠标构成的矩形,松开鼠标完成区域截取。很明显,我们会利用到鼠标事件。...当我们按下鼠标的时候,就进入了“捕获状态”(isCapturing置为true),并且记录鼠标此时按下的位置(startX和startY);在鼠标移动过程中,不断的更新当前鼠标位置(设置currX和currY...注意事项2:在QT中,mouseMoveEvent并不是随时都在触发,该事件默认只有在鼠标按下以后的移动过程才会触发,QT这样设计考虑的点是因为鼠标的移动是很频繁的,随时触发会降低性能。...但一旦我们将鼠标移动到左上角,位于起始位置的左边和上边的时候,就应该用当前鼠标的位置作为矩形的左上角了: 于是,我们需要适当修改以下paintEvent中的代码: void paintEvent(
一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置 如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。...1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 重点: 1、一定要绝对定位,脱离文档流才可以移动。...2、绑定拖拽的元素,移动和鼠标松开后是对document的绑定,因为移动的是整个div。 3、点击:a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。...当鼠标点中元素并且开始移动时,就会触发dragstart事件(类比mousedown) 拖拽过程中会持续不断地触发drag事件(类比mousemove) 松开鼠标取消拖拽时就会触发dragend...事件 离开目标元素,触发dragleave事件(类比mouseout) 若拖放元素到了目标元素中(在目标元素中松开鼠标),就会触发drop事件而不会触发dragleave事件
在mouseup事件后,包含鼠标按下与释放的特定节点会触发"click"事件。例如,如果我在一个段落上按下鼠标,移动到另一个段落上释放鼠标,"click"事件会发生在包含这两个段落的元素上。...每次鼠标移动时都会触发"mousemove"事件。...使用pageYOffset(当前滚动位置)除以最大滚动位置,并乘以 100,就可以得到进度条长度。 调用滚动事件的preventDefault无法阻止滚动。...按下鼠标按钮时,会触发mousedown、mouseup和click事件。移动鼠标会触发mousemove事件。...你可以根据你的需要实现简单的或复杂的方法。简单的解决方案是保存固定鼠标的轨迹元素并循环使用它们,每次mousemove事件触发时将下一个元素移动到鼠标当前位置。
---- 四、使用刚体移动物体 相关方法 Rigidbody.MovePosition(Vector3): 使用刚体移动物体的位置。 使用刚体移动物体,物体是根据世界坐标系的方向移动的。...使用刚体移动物体,物体会触发物理相关的事件。 参数 MovePosition 中的 Vector3 要使用“当前位置”+ 方向 的方式。...gameObject.name 属性,当前物体的名 ---- 第 15 课:刚体触发事件监测与处理 一、触发事件简介 触发器 将碰撞体组件属性面板上的“Is Trigger”选项选中,当前的游戏物体的碰撞体就变成了触发器...移动的刚体物体会穿透碰撞体勾选了“Is Trigger”的物体。 触发事件 当一个用刚体控制的物体进入到另外一个物体的触发器范围内,就是触发事件。...---- 二、触发事件监测方法 OnTriggerEnter(Collider) 当进入触发范围时开始时调用,只会调用该方法一次。
二:鼠标事件: 1.mousedown 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。...mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。 2.mouseenter 当鼠标指针穿过元素时,会发生 mouseenter 事件。...如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。 4.mousemove 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。...与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。 8.click 当鼠标点击并松开的时候会触发每一个匹配元素的click事件。...9.dblclick 当双击元素时,会发生 dblclick 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。
初始情况下,鼠标在画布上移动进而产生移动事件。我们引入一个辅助变量lastMousePosition(默认值为null),来表示上一次鼠标移动事件的所在位置。...在鼠标移动事件触发中,我们得到此刻鼠标的位置,并与上一次鼠标位置做向量差,进而得到位移差offset。对于offset我们将其应用在矩形的移动上。...**使用该变量记录鼠标在每一次移动过程中的位置。 **5.2 记录临时变量lastMousePosition。...在鼠标移动的过程中,我们是可以通过事件对象中的button或buttons属性的数值来判断当前鼠标的点击情况(MDN)。当buttons或button为1的时候,表示移动的过程中鼠标左键是按下的状态。...但需要注意的是,如果是首次的移动事件,那么上一次的位置是lastMousePosition是null,那么我们认为这个偏移0。 **5.6 改动矩形位置。
比如,因鼠标移动发生事件时,事件对象中就会包括鼠标位置(横纵坐标)等相关的信息; 获取事件对象的方式 早期IE浏览器(IE6~8):window.event 标准浏览器:会将一个event对象直接传入到事件处理程序中...,用来获取当前鼠标的位置信息。...位置属性(只读) 描述 clientX 鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标) clientY 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标) pageX 鼠标指针位于文档的水平坐标...当鼠标移动时,让遮罩跟着在小图中进行移动。 限定遮罩在小图中的可移动范围。 根据遮罩在小图中的覆盖范围,按比例的显示大图。 的确认操作等。JavaScript提供了相关的表单事件。...当鼠标移动时,让遮罩跟着在小图中进行移动。 限定遮罩在小图中的可移动范围。 根据遮罩在小图中的覆盖范围,按比例的显示大图。
一次触摸动作(我们指的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程. Touch.screenX 触点相对于屏幕左边沿的的X坐标....MouseEvent属性 属性/方法 描述 clientX 触发鼠标事件时,返回鼠标指针相对于当前窗口的水平坐标 clientY 触发鼠标事件时,返回鼠标指针相对于当前窗口的垂直坐标 pageX 触发鼠标事件时...,返回鼠标指针相对于文档的水平坐标 pageY 触发鼠标事件时,返回鼠标指针相对于文档的垂直坐标 screenX 触发事件时,返回鼠标指针相对于屏幕的水平坐标 screenY 触发事件时,返回鼠标指针相对于屏幕的垂直坐标...offsetX 返回鼠标指针相对于目标元素边缘位置的水平坐标 offsetY 返回鼠标指针相对于目标元素边缘位置的垂直坐标 movementX 返回鼠标指针相对于上一个mousemove事件位置的水平坐标...movementY 返回鼠标指针相对于上一个mousemove事件位置的垂直坐标 target 返回与触发鼠标事件的元素相关的元素 which 返回触发鼠标事件时按下的鼠标按钮 altKey 返回触发鼠标事件时是否按下
) pageY 光标相对于该网页的垂直位置(ie无) screenX 光标相对于该屏幕的水平位置 screenY 光标相对于该屏幕的垂直位置 target 该事件被传送到的对象 type 事件的类型 clientX...光标相对于该网页的水平位置 (当前可见区域) clientY 光标相对于该网页的水平位置 二、pageX、 clientX、 screenX的区别 1、screenX 、screenY 以电脑屏幕为基准... 区别 相同点都是 经过 div 才会触发 div.onmouseover 只触发一次 div.onmousemove 每移动一像素,就会触发一次 onmouseup 当鼠标弹起... onmousedown 当鼠标按下的时候 1、拖动 原理 == 鼠标按下 接着 移动鼠标 。 ...,就要记录当前 鼠标 的位置 - 大盒子的位置 1、 算出 bar 当前 在 大盒子内的距离 。
升级与出售 防御塔的升级与出售均通过管理菜单实现,要想实现单击防御塔弹出菜单的效果,需要借助ActorOnClicked事件,当鼠标点击Actor时触发此事件。...攻击范围的显示由ActorBeginCursorOver事件控制,当鼠标悬浮于Actor之上时触发该事件,首先判断游戏是否处于暂停状态与防御塔等级,当未暂停且等级>0时将攻击范围设置为可见。...当鼠标不再悬浮时,触发ActorEndCursorOver事件,此时将攻击范围重新设置为不可见,至此可实现只有当鼠标悬浮时才会显示防御塔范围。...受伤扣血实现 当子弹击中敌人后,会触发敌人基类内的AnyDamage事件,并传入子弹造成的伤害,该事件触发后首先扣除当前敌人一定HP,接着判断HP是否归0,若归0则将敌人设置为死亡状态且增加玩家金币。...因为本游戏中的防御塔属性全部与等级挂钩,因此无需存储整个防御塔基类,仅需要新建一个整数数组存储所有塔的等级,读取存档时根据等级初始化每个塔的属性即可。
鼠标的拖拽事件 拖拽的流程: (1)onmousedown:当鼠标在被拖拽元素上按下时,开始拖拽; (2)onmousemove:当鼠标移动时被拖拽元素跟随鼠标移动; (3)onmouseup:当鼠标松开时...,被拖拽元素固定在当前位置。...鼠标的滚轮事件 onmousewheel:鼠标滚轮滚动的事件,会在滚轮滚动时触发。但是火狐不支持该属性。 DOMMouseScroll:在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。...注意: 如果一直按着某一个按键不松手,那么,onkeydown事件会一直触发。此时,松开键盘,onkeyup事件会执行一次。...当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,后续的间隔会非常快。这种设计是为了防止误操作的发生。 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。
滑动事件获取手指位置 滑动事件的三个动作: [在这里插入图片描述] 获取手指的位置就涉及到坐标的概念,通过获取到 x、y、z就可以缺任意一个点的位置 [在这里插入图片描述] 手机中的坐标: [在这里插入图片描述...根据手指的位置来确定是上、下、左、右哪个滑动 首先把按下时的 x、y 移动onTouchEvent方法外面去,因为如果没有移动外面去,当第一次按下的时候就会调用onTouchEvent方法,接着就会调用按下时的位置...,然后松开 [在这里插入图片描述] 按下后鼠标从右往左移动,然后松开 [在这里插入图片描述] 按下后鼠标从上往下移动,然后松开 [在这里插入图片描述] 按下后鼠标从下往上移动,然后松开 [在这里插入图片描述...如果为false,表示只有一个动作会触发当前方法并执行对应的代码,后续的动作就不会触发当前方法 滑动事件的三个动作:按下——>移动——>松开,当为true时,这三个动作都会执行onTouchEvent...//如果为false,表示只有一个动作会触发当前方法并执行对应的代码,后续的动作就不会触发当前方法了 return false; } 运行后,当按下后再移动、松开
指定按钮上显示的位图;borderwidth(bd) 指定按钮边框的宽度;command: 指定按钮消息的回调函数;cursor: 指定鼠标移动到按钮上的指针样式...’;className 所绑定的类;鼠标键盘事件 鼠标左键按下,2表示中键,3表示右键; 同上...; 鼠标左键释放; 按住鼠标左键移动; 双击左键; ...;num 鼠标按键,仅对鼠标事件有效;type 所触发的事件类型;widget 引起事件的组件;width,heigh... 组件改变后的大小,仅Configure有效;x,y 鼠标当前位置,相对于窗口;x_root,y_root 鼠标当前位置,相对于整个屏幕12、弹窗
x、y值 window.moveBy(100,0);//谷歌浏览器貌似不支持了 //moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。...//setTimeout() 经过指定毫秒值后执行指定 的代码一次 事件 定义:当发生一个事件之后,会触发特定的方法 那么如何注册一个事件呢?...鼠标点击相关: onclick 在用户用鼠标左键单击对象时触发。...ondblclick 当用户双击对象时触发。 onmousedown 当用户用任何鼠标按钮单击对象时触发。 onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。...鼠标移动相关: onmouseout 当用户将鼠标指针移出对象边界时触发。 onmousemove 当用户将鼠标划过对象时触发。 焦点相关的: onblur 在对象失去输入焦点时触发。
(事件冒泡) //给p标签添加点击事件现在点击p标签的内容 就可以触发事件,点击页面的其它位置不会触发。...; }) //给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。...//给div添加鼠标移动事件,求出以div左上角为0,0 起始点的 鼠标位置 // $(".big").mousemove(function(event){ // //event...text(x+","+y); // }) //pageX:页面左上角的坐标 //给div添加鼠标移动事件,求出以网页左上角为0,0 起始点的 鼠标位置 // $(".big...鼠标位置 // $(".big").mousemove(function(event){ // //event:事件 // var x = event.clientX;//获得鼠标
领取专属 10元无门槛券
手把手带您无忧上云