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>

document.ready 内に配置された JS コード:

$(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 に答える