If you find yourself unable to modify the button directly because you lack access to it, such as not being able to assign an ID to it, there is still a workaround. You can add event handlers to the button through its children. To implement this, update your HTML code like so:
<!-- For simplicity, inline styling is used here, but it's recommended to use an external CSS file -->
<button><span id=span style="pointer-events: none">point here: </span></button>
<span id=result></span>
Then, adjust your JavaScript accordingly:
var span = document.getElementById('span');
var res = document.getElementById('result');
var mouseOverCallback = function () {
res.innerHTML = 'enter';
}
var mouseOutCallback = function () {
res.innerHTML = 'leave';
}
span.parentNode.addEventListener("mouseover", mouseOverCallback);
span.parentNode.addEventListener("mouseout", mouseOutCallback);
This technique appears to be effective in achieving the desired functionality even on Firefox. However, if the limitation lies in the fact that you are prohibited from altering the button for any reason, this solution may not be feasible.
Furthermore, keep in mind:
- The events were switched from
mouseenter and mouseleave to mouseover and mouseout, respectively. This change was made based on information from this and this, indicating that the latter set of events triggers only once for the entire hierarchy.
- The addition of the style
pointer-events: none to the span element prevents it from processing mouse events independently. Without this styling, I observed unwanted behavior in Chrome where hovering over the span triggered a mouseout on the button followed by another mouseover.