webkit系のブラウザではbuttonタグ内のクリックした要素によってevent.targetが変わる

JavaScript組んでいた時にハマったのでメモします。

結論から言うと、こうなります。

webkit系でbuttonタグ内にimgなどがあった場合、
buttonタグ内のimgをクリックした時に要素を event.targetで取得すると、
button内の要素のimgタグが取得されてしまう。

こう書くと何だかわかりづらいですね(汗

jQueryの書き方によっては、buttonタグをクリックしてるのになぜかその中のimgタグをクリックしたことになるんですよ。

検証用DEMOページを見てください
(webkit系のchromeやSafariで確認してください)

webkit系でのbuttonタグ内の挙動の違い

どんなJavaScriptを書いたかというとこんな感じです。

HTML

[html]


[/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タグを最近、久々に使ってハマったのでメモでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*