スマートフォン、というかAndroid端末むけのオーバーレイ対策としては
オーバーレイの背面にかくれたリンクもタップできてしまうトラブルが有名ですが
他にも困ったことがあったのでメモ。
オーバーレイを表示させるボタンのタップ位置とオーバーレイ上のリンクが重なると
開いたと同時にリンクをタップしてしまい、誤動作を起こしてしまいます。
納期も迫ってるしなんとかせねばと講じた策が、setTimeoutでの時間差操作。
$(function(){
var set_overlay = function(){
// ここにオーバーレイを開くための処理。今回は割愛。
};
$("#button").on("click", function(e) { // オーバーレイを開くボタン押下時のアクション
$("#overlay a").off("click").on("click", function(){ // オーバーレイ上のリンク押下時のアクション
return false; // いったんは押しても何も起こらないようにする
});
var overlay_search_wait = setTimeout(function(){ // ウェイトを設定
$("#overlay a").off("click").on("click", function(){ // オーバーレイ上のリンク押下時のアクション
alert("オーバーレイ上のボタン"); // ボタン押下時のアクション
});
delete overlay_search_wait; // 不要になったタイムアウトを削除
}, 1000); // 以上で設定したアクションを何秒後に実行するか設定（単位：ミリ秒）
return false;
});
});
もっとスマートな方法があるかな。