Test if cursor is over new raphael element without new mouseevent

Question

When I make a new element using Raphael.js, if this element arrives under an idle cursor, hover events do not trigger for chrome(42.0.2311.90) or internet explorer(11.0.8). Firefox(31.0, 32.0.2, and 37.0.2) works as expected.

I'm trying to find if there is a way to manually trigger tests that check if the cursor is over an element(when there is no new mouseevent after element is created) so I can compensate for this.

I think I need to get Raphael to do the test because shapes are often rotated and not square.

Other workarounds are welcome.

Code:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .board{
                height: 600px;
                width: 800px;
                border: 1px black solid;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
        <script> g = typeof g !== "undefined" ? g : {}; </script>
    </head>
    <body>
        <div id="board" class="board"></div>
        <script>
            g.board = Raphael("board",800,600);
            var circle = g.board.circle(50, 40, 10);
                circle.attr({"fill": "blue"});
            circle.hover(function() {
                this.attr({"fill": "yellow"});
                this.animate({"r": 30},1000);
                var circle = g.board.circle(50, 40, 10);
                circle.attr({"fill": "purple"});
                circle.hover(function() {
                    this.attr({"fill": "green"});
                    this.animate({"r": 25},1000);
                }, function() {
                    circle.remove();
                });
            }, function() {

            });
        </script>
    </body>
</html>

You may be interested in this answer http://stackoverflow.com/a/4403728/2466782 — Walker Boh, Apr 21 '15 at 00:12
Thank you for your comment, I've use that type of work around before for html, but it doesn't help if you're trying to test if your cursor is over a rotated vector graphic with a triangular hole in the middle. I think I need to find how to activate whatever Raphael uses to test if a cursor is within the bounds of the element. (Which I am still searching for too) — Grallen, Apr 21 '15 at 00:18

score 0 · Answer 1 · answered Apr 21 '15 at 01:24

When you stop looking, you find what you were looking for.

It seems I was seeking: Element.isPointInside(x, y) http://raphaeljs.com/reference.html#Element.isPointInside

I used this to test if new elements are under the cursor so I can trigger their hover events manually.

Test if cursor is over new raphael element without new mouseevent

1 Answers1