hierachical mouse enter and mouse leave in APEX Oracle

Question

I'm working with APEX Oracle ver 23.1.

I have an interactive grid including 1 column ITEM1. Each cell of column ITEM1 include 3 values which can be displayed as following:

$("*").on("mouseover", function(e) {
    $(this).addClass("mouse_over");
  e.stopPropagation();
});

$("*").on("mouseout", function(e) {
    $(this).removeClass("mouse_over");
  e.stopPropagation();
});

#parent {
  padding: 24px;
  background-color:red;
}

.child {
  padding: 6px;
  background-color:white;
}

.mouse_over {
    background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIUlEQVQYV2NkYGBIY2BgmMUABYxQGi4IEwCJgwWRBcCCAHscA2vMYjzKAAAAAElFTkSuQmCC
    ) repeat !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="parent">
  <div class="child">
    <span>Child 1 new</span>
   </div>
  <div class="child">
    <span>Child 2</span>
  </div>
  <div class="child">
    <span>Child 3</span>
  </div>
</div>

<div id="parent">
  <div class="child">
    <span>Child 1.2</span>
  </td>
  <div class="child">
    <span>Child 2.2.2</span>
  </div>
  <div class="child">
    <span>Child 3</span>
  </div>
</div>

I want to transfer this implementation to APEX Oracle. I first create 2 dynamic actions: one when Mouse Enter, one when Mouse Leave. And TRUE action when Mouse Enter is copying value ("child1, child2, child3") to clipboard. TRUE action when Mouse Leave is remove copying.

My problem is that

1. when moving the mouse from the parent to the child, the Mouse Enter DOES NOT fire for the child.
2. when moving the mouse back into the parent from the child, the Mouse Enter DOES NOT fire for the parent.

When adding $(this.browserEvent.target).stopPropagation(); to both TRUE action, the copying function does not work.

What should I do in this case?

Thanks in advance for any help.

Answer 1

In the JavaScript code, you can access the text of the hovered element and copy it to the clipboard. You can use the document.execCommand('copy') method to copy the text to the clipboard. Here's an example code snippet:

var target = $(this.triggeringElement);
var textToCopy = target.text().trim();

// Copy text to clipboard
var tempInput = $('<input>');
$('body').append(tempInput);
tempInput.val(textToCopy).select();
document.execCommand('copy');
tempInput.remove();

Make sure to apply the appropriate event handling for your specific use case. This approach should work for most cases where you want to copy text to the clipboard when a user hovers over an element in Oracle APEX. Dynamic Action for Mouse Leave:

Create another Dynamic Action for "Mouse Leave" on your interactive grid column ITEM1. For the "When" condition, select "Mouse Leave" event. For the "True Action," you can simply add a JavaScript code action to clear the clipboard if needed.