English 中文(简体)
参与人没有在Svg档案中进入ID时工作
原标题:Eventlistener not working when mouse entering ID within svg file

我为周围的中间商制定了简单的法典,并与特别志愿人员小组的档案和事件清单人员学习。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mouse Pointer Change</title>
<style>
    #svg5 {
        width: 50%; /* Adjust the width as needed */
        height: auto; /* Maintain aspect ratio */
    }
</style>
<script>
    window.onload = function() {
        var svgObject = document.getElementById( svg5 );
        svgObject.addEventListener( load , function() {
            var svgDocument = svgObject.contentDocument;
            var rect = svgDocument.getElementById( rect237 );

          // Function to change mouse pointer to crosshair
            function changeCursorToCrosshair() {
                console.log("Mouse entered rect237");
                document.body.style.cursor =  crosshair ;
            }

            // Function to change mouse pointer to default
            function changeCursorToDefault() {
                console.log("Mouse left rect237");
                document.body.style.cursor =  default ;
            }

            // Add event listener for mouse enter
            rect.addEventListener( mouseenter , function() {
                console.log("Mouse entered rect237");
                changeCursorToCrosshair();
            });

            // Add event listener for mouse leave
            rect.addEventListener( mouseleave , function() {
                console.log("Mouse left rect237");
                changeCursorToDefault();
            });

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

<object id="svg5" type="image/svg+xml" data="./img/simple_pitch.svg"></object>

</body>
</html>

然而,在测试该法典时,没有发生任何情况。 我增加了一些ole木,但没有显示。 我希望有人能够让我知道我所失踪的人。

成就

问题回答

Two things: Since the <object> s data is set inline in the markup, the window.load event will wait for the <object> s load event before it fires. So when you are in the window.load event handler, the <object> s one has already fired and won t again until its data attribute changes.
This means that the svgObject s load event won t fire and your callback won t be called.
So remove the line svgObject.addEventListener( load , ... and call directly your code in the window.onload event handler.

Then, document.body.style.cursor = crosshair ; will set the cursor of the outer HTML document s <body> tag, but the element you are hovering is the inner SVG document s <rect> element. Both documents are isolated and the <object> s inner document will capture the pointer events, including the setting of the cursor.
If you want to change the cursor, you can set it to svgDocument.documentElement.style.cursor = ....
(Obviously you could also have achieved the same with a simple rect { cursor: crosshair } CSS rule, but I get it s just a test to use events.)





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签