JavaScript組んでいた時にハマったのでメモします。
結論から言うと、こうなります。
webkit系でbuttonタグ内にimgなどがあった場合、
buttonタグ内のimgをクリックした時に要素を event.targetで取得すると、
button内の要素のimgタグが取得されてしまう。
こう書くと何だかわかりづらいですね(汗
jQueryの書き方によっては、buttonタグをクリックしてるのになぜかその中のimgタグをクリックしたことになるんですよ。
検証用DEMOページを見てください
(webkit系のchromeやSafariで確認してください)
どんなJavaScriptを書いたかというとこんな感じです。
HTML
JavaScript
[javascript]
$(document).ready(function(){
//ボタン1に clickで定義
$(‘#btn1’).click(function(){
alert( $(this).get(0).tagName );
});
//ボタン1に bindでclickで定義し、event.targetで要素を取得
$(‘#btn2’).bind(‘click’, function(event){
alert( $(event.target).get(0).tagName );
});
});
[/javascript]
$(‘#btn1’).click(function() 〜 の書き方はどのブラウザでも同じ挙動でした。
FirefoxやIEでは、buttonタグ内にIMG要素があっても、buttonタグをクリックしたことになります。
なぜかwebkit系でbindとevent.targetを組み合わせるとおかしくなりました。
解決策
どうしても bindとevent.targetで書きたい時は、以下のように書くことで解決しました。
[javascript]
$(document).ready(function(){
$(‘#btn3’).bind(‘click’, function(event){
targetElm = $(event.target);
if( targetElm.get(0).tagName != ‘BUTTON’){ //クリックした要素のタグ名がbuttonではない場合
targetElm = $(targetElm).parent(); //一つ上の親の要素を取得する
}
alert( $(targetElm).get(0).tagName );
});
});
[/javascript]
buttonタグを最近、久々に使ってハマったのでメモでした。
コメント