右クリックからのコンテキストメニューを表示　＞処理　を行うべく、

jquery.contextMenu.js を導入してみた。さぁ、いざテスト！　おお・・・これもすごいやん・・・・。

基本的な呼び出しはこんな感じ。メニューを用意しといて、右クリックさせたい対象に

$(“[id*=’edit_sc’]”).contextMenu({
menu: ‘myMenu’
},
function(action, el, pos) {
…..

んで、コンテキストメニュー内で選択したイベントは <a href=”#hoge”> のhogeを　callback　してくれる。

が・・・！またＩＥで妙ちくりんな事象が・・・

シングルファイルのサンプルファイルとかは理想通り動く。

しかし開発中のシステムに組み込むと全く動かない。正確には、メニューは出るけどその後の処理に移らない・・・。

デバッグ用ページに組み込むと普通に動く。xHTML文法チェッカとかを通しても論理構成破綻してないし、、、。

で、alert でcallback された action を見てみる

正常(理想とする)動作の場合  action には ‘hoge’ が入らないといけないところが

‘ttp://～～～/~~/~~/fuga#hoge’   が・・・なんでフルアドレス・・・。

最初こそ[ ttp: ] て・・２ちゃんかよ！とか思ったりしてほくそ笑んだりしたけど、

解決の糸口がみえないのでブチ切れ寸前に・・・。3時間ほど格闘の末、

ajax で後からreplace したエレメントに存在するメニューを呼び出してクリックすると

href にアドレスが補完されてる・・・。

ＩＥ謎すぎる・・・

jquery.contextMenu.js のソースを見てみよう・・・。

コールバックの部分に目をやろう。

// Callback
if( callback ) callback(  $(this).attr(‘href’) ).subst(1)  , $(srcElement), {x: x – offset.left, y: y – offset.top, docX: x, docY: y} );

注目すべきは .subst(1)。単純にhrefの文字列から先頭の1文字(ここでは’#’)を取り除いて第1引数として返してくれる。

もちろん呼び出し元のソースは <a href=”#hogefuga”> だから、hogefuga が返ってきてしかるべき。

なぜかＩＥ様(6,7ともに)は「ajaxで後から挿入したときに限り」勝手にhrefにフルアドレスが補完されます。

そりゃ先頭の1文字削除したら ttp: になるわなぁ。

どうしようもないっぽいので、ソースに直接手を下す。

//callback

if( callback ) callback( $(this).attr(‘href’).replace( /^.*#/gi ,”) , $(srcElement), {x: x – offset.left, y: y – offset.top, docX: x, docY: y} );

変更後は 正規表現で 先頭から # までの文字を削除しています。とりあえずこれで 、ＩＥもＦｘもしのげた。

お困りの人は是非。

※でも、戻り値action 受け取ってから自前で処理した方がよかったな・・・。