Question

我使用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）鼠标位置上显示一个工具栏。

Answer 1

试试这个

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

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

鼠标悬停在Raphael SVG路径上的工具提示

1 个答案: