开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

是否仅在父级上而不在子级上触发拖拽程序？

在父级上而不在子级上触发拖拽程序是指在拖拽操作中，只有在父级元素上进行拖拽操作时才会触发相应的程序，而在子级元素上进行拖拽操作时不会触发程序。

这种设计通常用于解决父子元素嵌套时的拖拽冲突问题。当子级元素也具有拖拽功能时，如果不进行特殊处理，可能会导致在拖拽子级元素时误触发父级元素的拖拽程序，从而产生不符合预期的行为。

为了避免这种情况，可以通过在拖拽程序中判断事件源是否为父级元素来进行区分。只有当拖拽操作发生在父级元素上时，才会执行相应的拖拽程序逻辑。而在子级元素上进行拖拽操作时，可以选择不执行拖拽程序，或者进行其他处理，如将拖拽操作传递给父级元素。

这种设计可以提升用户体验，避免拖拽操作的冲突，使得拖拽功能在父子元素嵌套的场景中更加灵活和可控。

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

腾讯云云服务器（CVM）：提供安全、稳定、可扩展的云服务器实例，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：提供高性能、可扩展的云数据库服务，适用于各类应用场景。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：提供安全、可靠、低成本的云端存储服务，适用于海量数据存储和访问。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等，助力开发者构建智能化应用。详情请参考：https://cloud.tencent.com/product/ai

相关搜索:Angular -双向数据绑定rxjs主题属性，不会在子级上发出，但会在父级上发出 JQuery -如何在单击按钮后检查特定类值是否在第一个子级上 Material UI - backdrop在其子级上触发onClick UML -父级上的子级与子级上的父级属性的列表仅在子级上显示一列的分组回收视图仅在所单击元素的父级上运行的jquery函数仅在父级上捕获或取消JS滚动轮事件-而不是子级使用powershell将子文件夹内容上移一级；不同的父文件夹在动态子TextBox上执行KeyUp时，在动态父级上自动计算和显示结果在子组件或父组件中的单击事件上触发Google优化实验或任何标签，应用程序构建在Meteor React Redux上

相关搜索:

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

有帮助

没帮助

相关·内容

2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

拖拽会用到哪些事件 · dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件. · dragenter:拖拽鼠标进入元素时在该元素上触发...,用于给拖放元素设置视觉反馈,如高亮 · dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素. · dragleave:拖拽时鼠标移出目标元素时在目标元素上触发....此时监听器可以取消掉前面设置的视觉效果. · drag:拖拽期间在被拖拽元素上连续触发 · drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器...,需要取消浏览器默认行为. · dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件. 8....（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

1.9K2 0

Spring Cloud Alibaba商城实战项目基础篇（day03）

node.childNodes表示他的子节点我们通过node.level这个属性来判断是否是一级、二级菜单，node.level <= 2表示为二级菜单。...是否可以拖拽的核心就判断总层数是否大于3，大于3则不可以拖拽，否则可以拖拽。我们需要在el-tree中动态绑定这个方法。在这个方法里面做逻辑判断。...allowDrop(draggingNode, dropNode, type) { // 判断是否可以拖拽的核心是当前节点以及所在父节点的总层数不可以超过3 /// 1....(draggingNode) }, draggingNode表示的是拖拽的东西，而draggingNode.data可以获取到拖拽的节点信息。...v-model绑定了一个value值，这个value值决定了拖拽功能是否开启。我们再给el-tree中的动态拖拽功能也动态绑定一个属性，用于动态控制是否可以拖拽。

1.3K2 0

前端day16-JS(WebApi)学习笔记（事件补充、事件冒泡与捕获）

/images/mn.jpg" alt="" > 1.2-拖拽事件 1.ondragstart ：拖拽开始 2.ondrag ：拖拽中(不断触发) 3.ondragend...，那么他的所有父级元素的同名事件也会被依次触发元素->父元素->body->html->document->window 事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件 <!...阻止事件冒泡：让同名事件不要在父元素中冒泡（触发） * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件语法：事件对象.stopPropagation() IE8及之前不支持...，一级一级往上找父元素触发同名事件，如果有就触发 2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止事件捕获与事件冒泡触发事件的顺序完全相反 3.事件捕获，只能通过...，我们可以只需要给父元素添加事件即可，然后通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件隔壁老王1 隔壁老王

1.7K0 0

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

mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单注意：执行顺序：mousedown —> mouseup —> click 区别：mouseover和mouseout子元素也会触发...，可以冒泡触发区别：mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡阻止鼠标的默认事件 e.preventDefault() e.returnValue=false;//IE8...layerX,layerY layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角当元素及它的父级都没有定位属性时，以...body的左上角为原点：当元素的父级都有定位属性时，以父级的左上角为原点：当元素自身有定位属性时，以自身的左上角为原点： pageX， pageY pageX， pageY...发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/210117.html原文链接：https://javaforall.cn

2.4K2 0

vue通信-组件传值

: *eventBus；Vuex；本地传值；provide/inject ；attrs/listeners；一、props / $emit 父组件通过 props 的方式向子组件传递数据，而通过$emit...子组件可以向父组件通信。...1.父传子（属性传值）必须掌握即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。...子传父（通过事件形式）必须掌握子组件通过事件向父组件传值，子组件绑定一个事件，通过 this....$emit() 来触发子组件 children.vue 子组件

4.1K3 0

JQuery Ztree 树插件配置与应用小结

treeIdString 对应 zTree 的 treeId，便于用户操控 treeNodeJSON 需要隐藏自定义控件的节点 JSON 数据对象 setting.check.enable 设置 zTree 的节点上是否显示...，并且根据返回值确定是否允许开启拖拽操作默认值：null 参数说明 treeIdString 被拖拽的节点 treeNodes 所在 zTree 的 treeId，便于用户操控 treeNodesArray...，自动选中其下所有子节点，类似这种联动）；为 false 且 treeNode.checked = checked 时，不会触发回调函数，直接返回不影响父子节点中 treeNode.nocheck =...ztree_nodes_list = [] def get_sub_resource(resource, father_node): ''' 获取子级资源...ztree_nodes_list.append(father_node) get_sub_resource(father_resource, father_node) # 获取子级资源

7K4 0

Electron 无边框窗口开启全局拖拽

应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的（如操作系统的标准标题栏），在可拖拽区域内部使用 -webkit-app-region...应用那接下来就简单了，你可以自定义一个 titleBar 区域，将这个区域设置成可拖拽，拖拽操作将会触发 BrowserWindow 的 move 事件。....noDrag 类，如果一整个父级容器中里面的所有内容有很多需要点击，比如有整个表单，那可以应用到父级容器上，但是要注意应用的容器的高度需要包含内部元素。...由于笔者的应用为 Vue.js + Electron 有以下想法有时间验证下: 是否可以拦截 v-on 的 click 事件的注册，拦截到后将对应的元素统一添加 no-drag 样式编写自定义指令，扩展...@click 的功能，同时添加 no-drag 样式是否可以扩展 @click 的修饰符，来将元素上添加 no-drag 样式从 vue-loader 层面检测 template 中的事件并添加相应的

2.6K1 0

【第三篇】商城系统-基础业务-实现类别管理

商城系统-基础业务-分类管理在上一篇的基础上继续介绍。...拖拽功能首先实现拖拽效果 1> 放开拖拽的功能也就是我们只需要将 draggable设置为TRUE即可然后就是要控制拖拽的位置是否可行，因为我们不能破坏三级分类的规则，我们不能拖拽后整个分类变成了...然后拖拽确定后点击“批量保存”按钮来实现后端数据处理，点击触发相关的方法： ,editSort(){ // 获取最新的数据回写 this....拖拽节点的父节点需要修改 let parentId = 0; // 找到拖拽节点对应的所有的兄弟节点 let siblings = null;...然后就是触发删除的方法后，我们需要找到所有的被选中的节点。结合ElementUI官方的信息来获取。

9212 0

ReactPortals传送门

ReactPortals传送门 React Portals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器...MouseEnter: 当鼠标光标进入一个元素时触发，该事件仅在鼠标从元素的外部进入时触发，不会对元素内部的子元素产生影响。...MouseLeave：当鼠标光标离开一个元素时触发，该事件仅在鼠标从元素内部离开时触发，不会对元素外部的父元素产生影响。...避免重复触发: MouseOver和MouseOut事件在鼠标悬停在元素内部时会重复触发，当鼠标从一个元素移动到其子元素时，MouseOut事件会在父元素触发一次，然后在子元素触发一次，MouseOut...事件也是同样会多次触发，可以将父元素与所有子元素都看作独立区域，而事件会冒泡到父元素来执行事件绑定函数，这可能导致重复的事件处理和不必要的逻辑触发，而MouseEnter和MouseLeave事件不会重复触发

1845 0

原生JS中的拖拽方法继承

background: yellow; position: absolute; } // 定义拖拽父级对象...that.fnDown(ev); return false; }; }; // 拖拽父级对象原型上添加鼠标落下时的方法...document.onmouseup = function () { that.fnUp(); }; }; // 拖拽父级对象原型上添加鼠标移动时的方法...+ 'px'; this.oDiv.style.top = oEvent.clientY - this.disY + 'px'; }; // 拖拽父级对象原型上添加鼠标抬起时的方法...// 继承父级对象的原型 LimitDrag.prototype = Drag.prototype; // 修改父级对象上拖拽鼠标移动时的方法，添加边界限制

5K2 0

2020年Vue面试题汇总

keyup.xxx=’yyy’ b、系统修饰符可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器...另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。...$parent.event来调用父组件的方法。第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。...第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。 2.vue中父组件调用子组件的方法父组件利用ref属性操作子组件方法。...$emit('方法名‘,传值) 2.父组件通过子组件绑定的'方法名'获取传值。（4）vue页面级组件之间传值 1.使用vue-router通过跳转链接带参数传参。

2.7K2 0

关于后台管理系统可拖拽式组件的设计思路

而 table 下面的 buttons 数组，是由于在一般的 table 组件的上方会有一排按钮，用于新增，或者批量操作等。...事件的目标元素，然后结合 dragstart 事件的信息，确定当前拖动组件的父级是谁，然后进行数据组装，这里所有的数据组装都由 drop 事件来完成，数据组装完成之后，更新中间的渲染区域。...} ] } // ... ] 复制代码定义完基本信息之后，我们还需要处理两种特殊情况：当组件中的一个属性其实是依赖另一些属性的具体值的处理组件处于不同的父级组件下...还有一种是同一个组件在不同的父级显示不同的可操作属性，比如，input 组件在 search 组件下不需要校验字段，而在 form 表单是需要的，所以我们可以增加一个字段 use： const formItem...type: 'input' } // ... ] 复制代码以上信息表示，formItem 组件的标签属性是在 search 和 dialog 组件中使用的，其它的父级组件下不会显示

1.3K2 0

DOM事件的传播机制

也就是说，在冒泡阶段，事件会依次触发父级元素的相同类型事件处理程序。...，然后在冒泡阶段依次触发父级元素的相同类型事件处理程序。...事件捕获流事件捕获是指在DOM树中，事件从最外层的父级元素开始向下捕获传播的过程。也就是说，在捕获阶段，事件会依次触发父级元素的相同类型事件处理程序。...通过在父级元素上绑定一个事件处理程序，可以监听子级元素触发的事件。这样一来，无论子级元素是已经存在的还是动态生成的，都可以通过父级元素来管理它们的事件。...，我们可以捕获到子级元素触发的点击事件，并且可以获取到触发事件的目标元素。

1573 0

问题整理

相关子查询，无关子查询所谓相关子查询，是指求解相关子查询不能像求解普通子查询那样，一次将子查询求解出来，然后求解父查询。相关子查询的内层查询由于与外层查询有关，因此必须反复求值。　　...事件冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播...，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。...父类方法被默认修饰时，只能在同一包中，被其子类被重写，如果不在同一包则不能重写。父类的方法被protoeted时，不仅在同一包中，被其子类被重写，还可以不同包的子类重写。...priavte，那么就不能在子类对其进行重载，如果定义的话，也只是定义了一个新方法，而不会达到重载的效果。

1.2K4 0

【国产】大数据ETL自动化调度运维专家TASKCTL

TASKCTL 是一款企业级免费批量调度系统，支持各类脚本、程序的调度。...，当父作业执行结束且执行成功后将会主动触发一次子作业的执行；核心功能：包括串行、互斥、并行、断点续跑、执行计划、容错策略、循环、自定义控制策略、关系策略、远程调度等；自定义作业参数：支持运行时配置调度作业参数...，即时生效；触发策略：提供丰富的作业触发策略，包括：固定间隔触发、固定延时触发、API（事件）触发、人工触发、父子作业触发；支持Linux、Windows、Aix等跨平台应用；支持10万级作业调度批量控制...（消息队列）、动态数据全内存访问的基础上构建的。...容错策略：可以实现作业错误后自动重跑，并可指定重跑次数，还可以实现错误重试次数满后，自动决定任务是否通过或失败。强大的自定义策略：一个任务是否运行、忽略以及等待，用户可以通过自定义条件来确定。

8922 0

精读《磁贴布局 - 功能实现》

精读实现磁贴布局前，先要实现最基础的组件拖拽流程，然后我们才好在拖拽的基础上增加磁贴效果。...基础拖拽能力对布局抽象来说，它关心的就是可拖拽的组件与容器的 DOM，至于这些 DOM 是如何创建的都可以不用关心，在这个基础上，甚至可以再做一套搭建或者布局框架层，专门实现对 DOM 的管理...拖入拖出判断当前拖拽位置是否进入了一个新容器，或者离开了当前容器；碰撞模块判断当前拖拽位置是否与其他 element 产生了碰撞，并做出相应的碰撞效果。...实际上，我们希望 A 的上边缘超过 B 的水平中心点就产生交换，此时 A 的水平中心点还在 B 的水平中心点之下，所以此时按照两种不同的判断规则会产生不同的位置判定，区分的手段就是 A 与 B 是否已经处于相交状态..., parentId, extraBox) {} 这个函数针对某个父容器节点生效重力，因此在不考虑 extraBox 的情况下逻辑是这样的：先拿到该容器下所有子 element，对这些 element

5452 0

react-grid-layout 之核心代码分析与实践

: number, // 每个网格单位在像素上实际的大小，也就是上面 calcGridColWidth 计算的每一列宽度 colOrRowSize: number, // 子组件 child...isDraggable} // 是否支持拖拽 onStart={this.onDragStart} // 开始拖拽触发的事件 onDrag={this.onDrag} // 拖拽过程中一直触发的事件...onStop={this.onDragStop} // 拖拽结束时触发的事件 handle={this.props.handle} // 上一级组件传入的回调函数...在原生 js 中有个 HTMLElement.offsetParent 属性，通过 node.offsetParent 可以获取父级含有定位属性元素最后通过 DOM 方法中的 getBoundingClientRect...在拖拽的过程中，为了确保元素不超出边界，我们要实时计算拖拽元素是否超出网格，通过计算底部边界 - bottomBoundary 确保元素不会超出其偏移父元素的底部边界；通过计算右侧边界 - rightBoundary

9252 0

在nodejs中创建child process

注意，worker_threads创建的是子线程，而child_process创建的是子进程。在child_process模块中，可以同步创建进程也可以异步创建进程。...当调用父进程中的 subprocess.disconnect() 或子进程中的 process.disconnect() 后会触发 disconnect 事件。...当出现无法创建进程，无法kill进程和向子进程发送消息失败的时候都会触发error事件。当子进程结束后时会触发exit事件。当子进程的 stdio 流被关闭时会触发 close 事件。...事件，当子进程使用process.send() 发送消息的时候就会被触发。...我们看一个在windows中使用spawn和exec的例子： // 仅在 Windows 上。

3.5K3 1

在nodejs中创建child process

注意，worker_threads创建的是子线程，而child_process创建的是子进程。在child_process模块中，可以同步创建进程也可以异步创建进程。...当调用父进程中的 subprocess.disconnect() 或子进程中的 process.disconnect() 后会触发 disconnect 事件。...当出现无法创建进程，无法kill进程和向子进程发送消息失败的时候都会触发error事件。当子进程结束后时会触发exit事件。当子进程的 stdio 流被关闭时会触发 close 事件。...事件，当子进程使用process.send() 发送消息的时候就会被触发。...我们看一个在windows中使用spawn和exec的例子： // 仅在 Windows 上。

3.2K3 0

每日问题

改变触发更新答：小程序没有willReciveProps这个生命周期。...小程序中propprties也是做这个用的，但是小程序中还有一种父->子的传递方法：this.selectComponent('#子组件id') 再父组件中this.selectComponent('...现在cocos中也有类似父子关系的两个node，由于子node太小，绑定在其身上的事件不容易触发，所以我将事件移动到父node上去，在cocosCreator中给父node添加一个Button属性，然后单独给父...node上绑定事件；结果只有点击父node才可以触发，点击子node不触发，这跟我们前面总结h5中的表现不一样啊？？？...别急，原因是我虽然单独给父node绑定了事件，可是子node上的Button属性我并没有remove，将其remove就好了。

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭