Oracle APEX 23.1交互式网格层级Mouse Enter/Leave事件异常咨询

核心问题分析 #

你的问题根源在于对mouseenter/mouseleave事件特性的误解，以及动态动作绑定逻辑的适配问题：

• mouseenter/mouseleave属于非冒泡事件，鼠标在父元素与子元素之间移动时，不会触发父元素的mouseleave或子元素的mouseenter（仅当鼠标完全离开父元素边界时才会触发父元素的mouseleave）。
• 直接添加stopPropagation()会阻断APEX动态动作内部的事件上下文传递，导致剪贴板复制逻辑依赖的元素或状态丢失。

针对性解决方案 #

场景1：鼠标进入整个单元格（含子元素）时复制完整内容 #

如果需求是只要鼠标在单元格范围内，就复制"child1, child2, child3"，离开单元格时取消UI状态（如移除高亮），按以下步骤操作：

1. 标记单元格DOM：在交互式网格ITEM1列的「HTML属性」中添加自定义类，例如：class="cell-parent"，用于精准定位单元格。
2. 创建动态动作（Mouse Enter）：
   • 事件：Mouse Enter
   • 选择器：.cell-parent
   • 事件范围：Dynamic（适配交互式网格动态渲染的特性）
   • 动作：执行JavaScript代码

     // 执行剪贴板复制
     navigator.clipboard.writeText("child1, child2, child3")
       .then(() => {
         // 可选：添加UI反馈，比如高亮单元格
         $(this.triggeringElement).addClass("mouse_over");
       })
       .catch(err => {
         console.error("复制失败:", err);
       });
     

3. 创建动态动作（Mouse Leave）：
   • 事件：Mouse Leave
   • 选择器：.cell-parent
   • 事件范围：Dynamic
   • 动作：执行JavaScript代码

     // 移除UI状态（剪贴板内容无需主动清除）
     $(this.triggeringElement).removeClass("mouse_over");
     

场景2：鼠标进入子元素时复制对应内容 #

如果需要点击不同子元素复制对应文本，调整如下：

1. 标记子元素：确保每个子元素带有自定义类，例如：class="child"
2. 创建动态动作（Mouse Enter）：
   • 事件：Mouse Enter
   • 选择器：.cell-parent .child
   • 事件范围：Dynamic
   • 动作：执行JavaScript代码

     // 获取当前子元素的文本内容
     const targetText = $(this.triggeringElement).find("span").text();
     // 复制到剪贴板
     navigator.clipboard.writeText(targetText)
       .then(() => {
         $(this.triggeringElement).addClass("mouse_over");
       })
       .catch(err => {
         console.error("复制失败:", err);
       });
     

3. 创建动态动作（Mouse Leave）：
   • 事件：Mouse Leave
   • 选择器：.cell-parent .child
   • 事件范围：Dynamic
   • 动作：执行JavaScript代码

     $(this.triggeringElement).removeClass("mouse_over");
     

原示例事件逻辑适配（逐元素触发高亮） #

如果需要还原你提供的示例中「鼠标移到任意元素都触发高亮」的效果，需改用mouseover/mouseout事件（冒泡特性）：

1. 动态动作（Mouse Over）：
   • 事件：Mouse Over
   • 选择器：.cell-parent, .cell-parent .child
   • 事件范围：Dynamic
   • 动作：执行JavaScript代码

     $(this.triggeringElement).addClass("mouse_over");
     // 执行复制逻辑（按需调整）
     const fullText = $(this.triggeringElement).closest(".cell-parent").find("span").map(function(){
       return $(this).text();
     }).get().join(", ");
     navigator.clipboard.writeText(fullText);
     // 阻止冒泡避免重复触发
     this.browserEvent.stopPropagation();
     

2. 动态动作（Mouse Out）：
   • 事件：Mouse Out
   • 选择器：.cell-parent, .cell-parent .child
   • 事件范围：Dynamic
   • 动作：执行JavaScript代码

     $(this.triggeringElement).removeClass("mouse_over");
     this.browserEvent.stopPropagation();
     

关键注意事项 #

• 确保选择器匹配APEX生成的实际DOM结构，可通过浏览器开发者工具查看元素类名或ID。
• 剪贴板API需要页面处于HTTPS环境（本地开发的localhost除外）。
• 动态动作的「事件范围」必须设为Dynamic，否则交互式网格分页、刷新后事件会失效。

内容的提问来源于stack exchange，提问作者Cassie