Question

在我的代码中，我使用常量String和String.Format来创建一系列svg元素：

const string BoxTemplate = "<rect x=\"{0}\" y=\"{1}\" height=\"{2}\" width=\"{3}\" fill=\"{4}\" stroke=\"#707070\" onmouseover=\"showToolTip()\"/>";
string s = String.Format(BoxTemplate, x, y, h, w, color);

然后我使用Literal控件渲染图像。

我想在鼠标悬停元素或其他事件中包含数据或至少包含数据键。我考虑过将id设置为datakey，但在某些情况下，多个图像会引用相同的数据。

让javascript函数识别哪个元素被“moused over”并访问其数据/ datakey的最佳方法是什么。

Answer 1

您可以使用this作为函数的参数。如果在渲染时具有该参数，也可以添加其他参数。

这对我有用：

<html>

    <script>
        function showToolTip(obj, datakey) {
            alert("ID=" + obj.id + " datakey=" + datakey);
        }
    </script>
    <body>
        <svg>
            <rect id="The_ID" x="10" y="10" height="100" width="100" fill="black" stroke="#707070" onmouseover="showToolTip(this, 'datakey1')"/>
        </svg>
        <svg>
            <rect id="The_other_ID" x="110" y="10" height="100" width="100" fill="black" stroke="#707070" onmouseover="showToolTip(this, 'datakey2')"/>
        </svg>
    </body>
</html>

在HTML（SVG）元素中包含data / datakey

1 个答案: