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

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

MouseEvent的类别有以下: mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过...mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单 注意: 执行顺序:mousedown —> mouseup —> click 区别:mouseover和mouseout子元素也会触发...对象 打印出MouseEvent对象内容: document.body.addEventListener("mousedown",clickHandler); function clickHandler...layerX,layerY layerX,layerY 往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 当元素及它的父级都没有定位属性时,以...body的左上角为原点: 当元素的父级都有定位属性时,以父级的左上角为原点: 当元素自身有定位属性时,以自身的左上角为原点: pageX, pageY pageX, pageY

3K20

移动端页面如何优雅的适配各种屏幕,包括PC端

' 接下来修改一下我们上面的示例,给按钮增加一个touchstart事件: 然后分别在模拟器和非模拟器环境下单击一下按钮: 显然,非模拟器环境下单击是没有效果的,接下来配置一下 @varlet/touch-emulator...,所以这里传true笔者猜测是因为如果是冒泡阶段触发的话,某个元素的可能会阻止冒泡,那么就不会触发window上绑定的这几个事件了。...eventTarget.dispatchEvent) 鼠标按下显然对应的是touchstart,触发的第一个touch事件,事件目标肯定也是新的,所以需要更新,理论上不同手指的事件目标是可能不一样的,但是由于桌面端鼠标事件只能有一个...:当前屏幕上所有触摸点的列表 targetTouches:当前对象上所有触摸点的列表 changedTouches:涉及当前(引发)事件的触摸点的列表 移动端触摸点是可能存在多个的,比如我同时好几个手指一起触摸...最后在事件目标上进行了事件的派发。 总结一下,整体所做的事情就是监听鼠标的三个事件,然后手动创建对应的touch事件对象,最后在事件目标元素上进行派发即可。

2.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如果用java swing编写一个五子棋(人人对战)

    一.前言 刚学习java,上一次写了一个姓名随机抽取器,点击查看,参加了原力计划,被小编推荐到了首页,也是第一次在首页看到自己写的东西,当时看到的那一刻实实在在很开心,其实我们好多人学习东西,恰恰就需要那么一点点的鼓励和被重视...,没错,我就是这类人,通过这次被官方推荐,我的小小内心得到了成就感,被人认可确实是一种美妙的事,所以我又下决心向更有难度的五子棋去挑战,但是由于本人能力有限,所以只写了人人对战,这期间也是遇到了无数的BUG...我也找到了游戏的背景,棋子落下时也会有音乐,由于录制的是动态图,所以没办法在这里给各位呈现音乐效果,下面有游戏效果和流程图,由于代码可能比较繁琐,我特意准备了流程图帮助各位理解,至于代码,我会尽可能注释清楚...我们不需要每次都遍历所有棋子的信息,这样太费事了没有人傻到五连珠,然后继续玩下去,我们可以断定的是一颗棋子落子之前是不会有五连珠的,所以我们只需要判断最后一次落子,例如水平方向上的判断: 我们可以获得该棋子的坐标...e) { } public void mouseClicked(MouseEvent e) { //获取鼠标单击事件 ,当鼠标单击时,获取坐标 if(boonum==true

    1.3K51

    FlashFlex学习笔记(38):缓动动画

    (MouseEvent.MOUSE_OVER,function(){ Mouse.cursor = MouseCursor.HAND;}); //在中心画个十字架 graphics.lineStyle...这样物体会不断向B点靠近,直到移动到B点;但从另一角度考虑,因为每次只移动一半的距离,所以永远也不可能真正达到B点。...同时再考虑另一个因素,Flash每次能将物体移动的最小距离为0.05象素(即1/20象素),比这个值再小的距离,Flash将不会处理。...所以再回头看上面的代码,我们在判断物体是否到达目标点时,不能用 ball.x == targetX 来精确判断,因为这样的条件也许永远不会成立,从而导致后面的removeEventListener也永远不会被执行到...,实际上Flash/Silverlight的IDE界面提供的缓动类型更多(比如先慢慢启动,再慢慢停止--即淡入淡出之类),对应的公式也有不少,www.robertpenner.com 大家可以到这上面找找

    58950

    Java图形用户界面设计AWT事件处理

    前面的文章介绍了如何放置各种组件,从而得到了丰富多彩的图形界面,但这些界面还不能响应用户的任何操作。比如单击前面所有窗口右上角的“X”按钮,但窗口依然不会关闭。...在GUI事件处理机制中涉及到4个重要的概念需要理解: 事件源(Event Source):操作发生的场所,通常指某个组件,例如按钮、窗口等; 事件(Event):在事件源上发生的操作可以叫做事件,GUI...KeyEvent 键盘事件 , 当按键被按下、松开、单击时触发该事件。 MouseEvent 鼠标事件,当进行单击、按下、松开、移动鼠标等动作 时触发该事件。...事件 触发时机 ActionEvent 动作事件 ,当按钮、菜单项被单击,在 TextField 中按 Enter 键时触发 AjustmentEvent 调节事件,在滑动条上移动滑块以调节数值时触发该事件...但是,由于Java的类采用单一继承机制,当事件监听器类已经存在父类,或者需要实现多个事件监听器接口时,就不能再继承事件适配器。

    17110

    【干货】20K以上的高薪Java必掌握的基础知识点(二)

    上一期的知识点小伙伴都掌握了多少呢?复习的同时有没有查漏补缺的巩固自己的基础知识呢?今天我们来复习Java基础知识第二期! 61、Math 类提供了许多用于数学运算的静态方法。...73、在try-catch-finally 结构中, finally 语句块一般总是会被执行,不管有没有异常产生。...110、当用户与GUI 交互,比如移动鼠标、按下鼠标键、单击Button 按钮、在文本框内输入文本、选择菜单项或者关闭窗口时,GUI 会接受到相应的事件 。...113、只要用户单击JButton,就会触发一个ActionEvent 事件,该事件被监听器接收,它的方法 actionPerformed() 被执行。...118、鼠标事件的类型是 MouseEvent ,即当发生鼠标事件时,该类自动创建一个事件对象。

    1.5K71

    JAVA事件适配器的作用

    大家好,又见面了,我是你们的朋友全栈君。 适配器 其实从接口事件演变尔来的。相当于触发器,说简单点,它就是一些动作 。 例如说 鼠标的按下 点击 还有键盘 等等。...适配器 就是实现 接口事件的类 不过 ,不是真的实现 ,只是空实现 ,没有具体的方法体。 适配器主要是为了方便程序员操作 ,避免了代码的重复性。...只要一个对象或者属性添加了这个适配器, 那么它就会监视这对象或属性 。例如说一个按纽。...再说明白点 就相当你给按纽 添加了一个鼠标对象。 你通过 鼠标 就可以 产生对应的动作!...e) 方法从而响应鼠标按键在组件上单击事件,重写mouseDragged(MouseEvent e)方法从而响应鼠标按键在组件上按下并拖动事件等等。

    53640

    第58节:Java中的图形界面编程-GUI

    在Java中GUI提供了对象在 java.awt 和 javax.swing 两个包中 在早年中, Java.awt为抽象窗口工具包, 英文为 Abstract Window ToolKit, 需要调用本地的系统方法来实现功能需求...而在awt的基础上,创建了一套图形界面系统, 从而提供了更多的组件, 而且完全是由Java实现的, 增强了移植性, 属于轻量级的控件....mouseListener public interface MouseListener extends EventListener 用于在组件上接收“有趣”鼠标事件(按,释放,单击,输入和退出)的侦听器界面...方法 方法的详细信息: mouseClicked void mouseClicked(MouseEvent e) 在组件上单击鼠标按钮时调用 mousePressed void mousePressed...(MouseEvent e) 在组件上按下鼠标时调用 mouseReleased void mouseReleased(MouseEvent e) 在组件上释放鼠标时调用 mouseEntered

    1.8K30

    12.6事件处理

    例如,在用户界面上有一个按钮,当用户将鼠标移动到按钮上并单击时,就触发了一个“按钮单击”事件,然后由该命令按钮中的代码来完成相应的操作。因此,事件处理技术是用户界面程序设计中一项重要的技术。...事件:当用户在界面上执行一个操作,如按下键盘、单击或移动鼠标对窗口中的组件进行交互时所发生的事情。事件可以由外部用户操作触发,如单击按钮、单击鼠标等。事件也可以由操作系统触发,如时钟计数器等。...,其中只涉及了ActionEvent事件类,实际上,在java.awt.event和javax.swing.event包中还定义了很多其他事件类,例如ItemEvent、MouseEvent和KeyEvent...要创建一个窗口菜单,首先要在窗口中设置一个菜单栏对象JMenuBar,再在菜单栏上添加若干个菜单对象JMenu,每个菜单对象上再添加若干个菜单项。...(2) 在JFrame窗体下部添加5个按钮,分别为显示上一张、下一张和1、2、3,控制窗体上部显示的红、蓝、绿颜色卡片,使用CardLayout布局管理器实现如上效果。

    13110

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

    鼠标事件:在DOM2.0中,W3C对鼠标事件作了现范,鼠标事件被解析为MouseEvent(我们可以用e.constructor == MouseEvent来判断其是否为鼠标事件。...常见的鼠标事件有click:单击鼠标左键时发生。...与 click 不同,只要鼠标在元素上松开即触发(左右键都行)。mousedown:鼠标在元素上并按下时触发 mousedown 事件。与 click 不同,只要鼠标在元素上按下即触发(左右键都行)。...对应的移除事件是mouseoutmouseenter(鼠标进入):当鼠标移入元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleavemouseenter/mouseover...区别点:mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.

    3.9K21

    java之十二 事 件 处 理

    在java.util中被封装的EventObject类是Java事件类层次结构的根节点。它是所有事件类的父类。...小结: · EventObject 是所有时间类的父类 · AWTEvent是所有在授权事件模型中处理的AWT事件类的父类 java.awt.event这个包定义了一些能被各种用户接口单元产生的事件类型...如果你忽略了这一点,你的程序将不会获得任何键盘事件。 下面的程序演示了键盘输入的处理。它将回显按键到小应用程序窗口,并在窗口的状态栏上显示每一个按键被按下或释放的状态。...像以前一样,它还是在鼠标被按下时,在小应用程序查看器或浏览器的状态栏上显示“Mouse Pressed”这个字符串。...这个新类没有名称,但是在这个表达式被执行时,自动实例化。 由于这个匿名内部类被定义在AnonymousInnerClassDemo类的范围之内,它可以访问这个类中的所有成员变量和方法。

    8300

    一文彻底搞懂js中的位置计算

    在实际工作中如果对于滚动操作有很频繁的需求,个人建议去使用better-scroll,它是一个移动/web端的通用js滚动库,内部是基于元素transform去操作的滚动并不会触发相关重塑/回流。...offset MouseEvent.offsetX/offsetY MouseEvent 接口的只读属性 offsetX/Y 规定了事件对象与目标节点的内填充边(padding edge)在 X/Y 轴方向上的偏移量...注意是触发元素也就是 e.target,额外小心如果事件对象中存在从一个子元素当移动到子元素内部时,e.offsetX/Y 此时相对于子元素的左上角偏移量。...我们来看看这张图: 计算元素距离 body 的偏移量 当我们需要获得元素距离 body 的距离时,但是又无法确定父元素是否存在定位元素时(大多数时候在组件开发中,并不清楚父节点是否存在定位)。...window.getComputedStyle 用法讲解 Window.getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS

    3.9K10

    Java-GUI编程之事件处理

    事件处理 前面介绍了如何放置各种组件,从而得到了丰富多彩的图形界面,但这些界面还不能响应用户的任何操作。比如单击前面所有窗口右上角的“X”按钮,但窗口依然不会关闭。...在GUI事件处理机制中涉及到4个重要的概念需要理解: 事件源(Event Source) :操作发生的场所,通常指某个组件,例如按钮、窗口等; 事件(Event):在事件源上发生的操作可以叫做事件,GUI...KeyEvent 键盘事件 , 当按键被按下、松开、单击时触发该事件。 MouseEvent 鼠标事件,当进行单击、按下、松开、移动鼠标等动作 时触发该事件。...2.高级事件:这类事件并不会基于某个特定动作,而是根据功能含义定义的事件。...事件 触发时机 ActionEvent 动作事件 ,当按钮、菜单项被单击,在 TextField 中按 Enter 键时触发 AjustmentEvent 调节事件,在滑动条上移动滑块以调节数值时触发该事件

    1.4K20

    as3.0中如何阻止事件冒泡?

    as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进来以后,如果两个Sprite都注册了Mouse_Down...sub_Child上点击时,另外二个Sprite就不会响应Mouse_Down事件,但是stopImmediatePropagation方法与stopPropagation有什么区别呢?...,在最小的矩形_sub_Child上点击,输入如下: _sub_child.MOUSE_DOWN_2 _sub_child.MOUSE_DOWN_1 _child.MOUSE_DOWN _container.MOUSE_DOWN..._2"); } 这回输出不同了: _sub_child.MOUSE_DOWN_2 _sub_child.MOUSE_DOWN_1 小结:如果某对象的一个事件同时添加多个监听,stopPropagation...将把该事件注册的所有监听处理函数执行完后,再阻止该事件继续向上冒泡;而stopImmediatePropagation方法将本次处理函数执行完后就立即阻止事件继续向上冒泡(即同一事件的其它监听函数将不会执行

    1.6K60

    【QT】QT事件处理

    事件处理 QT中,事件作为一个对象,继承自QEvent类,常见的有键盘事件QKeyEvent、鼠标事件QMouseEvent和定时器事件QTimerEvent等。...一旦有事件发生,QT便会构造一个相应的QEvent子类的对象来表示它,然后将它传递给QObject对象或子对象。 ---- 鼠标事件 对鼠标实现进行重写来实现你想要达到的功能。...m_startY:m_startY+m_step; } } drawPix();//根据调整后的图标位置重新在m_pix上绘制图像 update();//触发窗口重绘 }...m_stateLabel); resize(m_image2.width() * 3,m_image2.height() *2); //给图片标签部件安装事件过滤,并且指定整个窗体为监视事件的对象...//放大图片 matrix.scale(2.0,2.0); //对象 if(watched == m_label1) { //鼠标按下事件的处理

    1.6K10
    领券