由于角2中的父MouseEvent，在子对象上单击MouseEvent不会被执行

的原因是事件冒泡和事件捕获机制。

事件冒泡是指当一个元素上的事件被触发时，该事件会从最内层的元素开始向外层元素逐级触发，直到触发到最外层的元素。而事件捕获则是相反的过程，事件从最外层元素开始，逐级向内层元素触发。

在这个问题中，当在子对象上单击MouseEvent时，事件会首先触发子对象上的事件处理函数，然后再逐级向外层元素触发，直到触发到父MouseEvent。但是由于父MouseEvent并没有绑定相应的事件处理函数，所以事件在父MouseEvent上不会被执行。

解决这个问题的方法有两种：

在父MouseEvent上绑定相应的事件处理函数，使其能够响应子对象上的事件。
使用事件捕获机制，将事件从最外层元素开始触发，逐级向内层元素传递，这样父MouseEvent上的事件处理函数就能够被执行。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云函数（云原生）：https://cloud.tencent.com/product/scf
腾讯云数据库（数据库）：https://cloud.tencent.com/product/cdb
腾讯云服务器（服务器运维）：https://cloud.tencent.com/product/cvm
腾讯云音视频解决方案（音视频）：https://cloud.tencent.com/solution/media
腾讯云人工智能（人工智能）：https://cloud.tencent.com/product/ai
腾讯云物联网（物联网）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动开发）：https://cloud.tencent.com/product/mobdev
腾讯云对象存储（存储）：https://cloud.tencent.com/product/cos
腾讯云区块链（区块链）：https://cloud.tencent.com/product/baas
腾讯云虚拟专用网络（网络通信）：https://cloud.tencent.com/product/vpc
腾讯云安全产品（网络安全）：https://cloud.tencent.com/product/saf
腾讯云游戏多媒体云（多媒体处理）：https://cloud.tencent.com/product/gme
腾讯云元宇宙解决方案（元宇宙）：https://cloud.tencent.com/solution/metaverse

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

2.8K2 0

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

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

2.1K2 0

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

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

1.2K5 1

详解JavaScript事件处理程序

两种方式使用事件功能：1、增加元素的事件属性；2、调用内置对象的方法addEventListener。 <!...，还会一直向上寻找所有父元素对应的事件处理程序并执行。...2、事件委托让父元素监听执行子元素的某个事件，原理：子元素没有注册事件处理程序，事件会冒泡向上寻找相应执行程序。...实例：在表单提交中，通常会做一些数据校验，如果数据不符合格式，可以用preventDefault() 方法来阻止数据发送到服务器的默认操作。...实例：编程方式生成单击事件。

8520 0

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 大家可以到这上面找找

5795 0

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

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

1.5K7 1

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

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

1501 0

JAVA事件适配器的作用

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

5284 0

AS3关于事件流

{ trace( event.target , event.currentTarget ); } 依次单击C ，B ，A的结果：单击A根本就没有反应 ?...如果把$a的单击注册事件改成： $a.addEventListener(MouseEvent.CLICK,this.ClcikHandler,false,0,false); 就是将第三个参数改为false...，则结果为：单击A有反应 ?...addEventListener的第三个参数如果为false（默认为flase），回调事件会在冒泡状态的时候执行；否则会在目标状态执行。...当参数为true时，在A上注册，不存在冒泡状态，回掉函数不会执行。

3682 0

Java中的图形界面编程-GUI

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

2.1K2 0

第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.8K3 0

React技巧之将函数作为props传递

TypeScript中将函数作为props传递：在组件的接口中为函数属性定义一个类型。...在父组件中定义函数。将函数作为prop传递给子组件。...，实际函数的类型要与我们在ButtonProps中指定的类型一致。...event对象的类型。...该类型根据元素和事件的不同而不同（如onChange、onClick等等）。你可以在IDE中编写处理函数，并将鼠标悬停在event参数上来弄清楚event的类型。

9471 0

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

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

3.6K2 1

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.6K6 0

vue-property-decorator的简单介绍,一看就会

注意:属性的ts类型后面需要加上undefined类型；或者在属性名后面加上!...注意,使用PropSync的时候是要在父组件配合.sync使用的 // 父组件父组件 like...: string; // 用来实现组件的双向绑定,子组件可以更改父组件穿过来的值 editLike(): void { this.syncedlike = '子组件修改过后的syncedlike...:boolean 被侦听的对象的属性被改变时，是否调用该回调函数；发生在beforeCreate勾子之后，created勾子之前 <div class="PropSync...Inject/InjectReactive都可取到不同点: 如果提供(ProvideReactive)的值被父组件修改，则子组件可以使用InjectReactive捕获此修改。

1.2K2 0

Java-GUI编程之事件处理

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

1.4K2 0

【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.6K1 0

可视化（番外篇）——SWT总结

创建一个或者多个Shell对象，你可以认为Shell代表了程序的窗口。（3）. 在Shell内创建各种部件（widget）（4）. ...调用Display对象的dispose()方法以结束程序。...Shell是显示在桌面上的窗口。可以是顶级窗口或是对话框。　　...每个控件都会有自己的父部件，这个父部件可以是Composite类或它的子类，shell也是Composite的子类。　　SWT中控件体系的继承关系为： ?...TabItem上显示关闭窗口。

1.7K10 0

python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析

，然后在发射这个信号，则不关心，但是如果要重载一个按钮，这时候就要关心了，比如可以改变它的行为：在鼠标按下时触发clicked信号，而不是释放时 PyQt5常见事件类型 pyqt是对Qt的封装，qt程序是事件驱动的...，由于这中方法会调用installEventFilter的所有QObject的事件进行过滤，因此如果要过滤的事件比较多，则会降低程序的性能 4 、在QApplication中安装事件过滤器这种方法比上一种更强大...，Tab键由于涉及焦点切换，不会传递给keyPressEvent，因此，需要在这里重新定义。'''...，建立text和message两个变量，使用painEvent函数把他们输出到窗口中 update函数的作用是更新窗口，由于窗口更新过程中会触发一次paineEvent函数（paintEvent是窗口基类...重载tab键 '''重新实现其他事件，适用于PyQt没有提供该事件的处理函数的情况，Tab键由于涉及焦点切换，不会传递给keyPressEvent，因此，需要在这里重新定义。'''

2.6K2 1

一文彻底搞懂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.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云