質問
ご閲覧いだたき、ありがとうございます。
イメージマップを作成し『areaタグをクリックするとhrefで指定されたIDのツールチップが表示される』という機能を作りました。次にそのツールチップはarea[shap="circle"]
を基準につなげたいので、area[shap="rect"]
がクリックされたときはarea[shap="circle"]
がクリックされたことにしたいと考え、下記コードを作成しました。
しかし、jsで発火させたclick()はイベントオブジェクトがundefined
な為、e.pageYなどの値がとれません。(一度area[shap="circle"]
を自力でクリックしてイベントオブジェクトの中身が一度登録されると、意図したとおりの動きになります。)
どうにかjsで発火させたclickイベントの中でイベントオブジェクトを取得することはできないでしょうか?
ご回答お待ちしております。よろしくお願いいたします。
質問追記
area[shap="rect"]がクリックされたときは、同じhrefが指定されているarea[shap="circle"]だけがクリックされたことにしたいです。
しかし現状では$('area[shape="circle"][href="' + $(this).attr("href") + '"]').click()
で、再度$(this).click(function (e) {
が呼ばれているのですが、eの値が取れていないためe.pageYなどが取れない状況です。
eの値がちゃんと取れるようになりarea[shap="circle"]のe.pageY,e.pageXの値が取れるようにさせたいです。
コード
html,jsともにかなり簡略化しています。
target
がここ述べている"ツールチップ"になります。
html
1<area shape="circle" coords="534,526,5" href="#foo" class="area"> 2<area shape="rect" coords="539,518,564,532" href="#foo" class="area">
javascript
1$('area').each(function (i) { 2 var target = $(this).attr('href'); 3 $(this).click(function (e) { 4 e.preventDefault(); 5 var windowWidth = $(window).innerWidth(); 6 var targetHeight = $(target).outerHeight(); 7 var Y; 8 var X; 9 10 if ($(this).attr("shape") == "rect") { 11 // ここでクリックさせた要素のイベントオブジェクトをとりたい 12 $('area[shape="circle"][href="' + $(this).attr("href") + '"]').click(); 13 return; 14 } 15 16 if (e.pageX < windowWidth * 1 / 4) { 17 Y = e.pageY - targetHeight + 10; 18 X = e.pageX + 70; 19 } else if (e.pageX > windowWidth * 1 / 4 && e.pageX < windowWidth * 2 / 4) { 20 Y = e.pageY - targetHeight + 10; 21 X = e.pageX + 70; 22 } 23 24 $(target).css({ 25 "left": X + "px", 26 "top": Y + "px" 27 }).addClass("active").fadeIn(600); 28 }); 29});
回答1件
あなたの回答
tips
プレビュー