0

我使用 Raphael Sketchpad（Raphael 下的一个库）来绘制 SVG 路径。我想在路径上发生鼠标悬停事件时触发事件，但是我尝试了所有可以在此主题上找到的示例，但没有任何帮助，当我点击路径元素时，鼠标悬停事件没有触发，悬停我可以轻松附加将鼠标悬停在 SVG 容器的事件侦听器上，但这不是我想要实现的。

下面是呈现的 HTML 的片段

        <div id="sketchpad" style="-moz-user-select: text;">
            <div class="box" id="demo-mouse" style="-moz-user-select: text;">

                <div style="background-color: rgba(255, 255, 255, 0.3); cursor: crosshair; -moz-user-select: text;" id="canvas">
<svg height="750" version="1.1" width="1200" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; -moz-user-select: text;"><desc>Created with Raphaël 2.1.0</desc><defs/>
<path style="stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" d="M287,226L311,259L337,280L349,287L359,294L378,309L396,318L399,320L405,323L406,325L408,328L409,328L410,329L411,329L413,326L414,320L416,296L418,280L418,267L420,233L423,220L427,208L430,186L432,177L432,174L432,160L432,157L432,150L430,139L429,134L429,129" stroke-opacity="1" stroke-width="1" stroke-linecap="round" text-anchor="" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)"/>
                </div>

            </div>
        </div>

JS代码，放在一个document.ready里面：

$(document).ready(function () {
$("#sketchpad path").on("mouseover", function() {
   console.log("HIT"); // Nothing happens
})
});

有什么建议么？

我的目标是在鼠标碰到路径（如 QTip）时在鼠标位置上显示一个工具栏。

4

1 回答 1

1

试试这个

$("#sketchpad").on("mouseover", "path", function() {
   console.log("HIT");
})

甚至更好 - 使用 Raphael 的本机方法Element.mouseover http://raphaeljs.com/reference.html#Element.mouseover

于 2013-03-30T18:03:47.207 回答