【jQuery】要素の外側のタップイベント捕捉
スマホサイトの改修で検索履歴のサジェスト表示を頼まれた。
オーバーレイでよく使われているような、要素の外側をクリックすると表示していた要素が消える動作をしたかったのでjQueryでプログラムくんだ。
以下のサイトで自前のjQuery拡張機能を作られていたので拝借し
【jQuery】要素の”外側”のクリックイベントを捕捉「skOuterClick」 | webシステム開発会社よりフリーランスのSEプログラマースコブト
今回はスマートフォンだったので以下のサイトをもとにタップイベントで反応するようjquery.skOuterClick.jsを改造
jqueryで指定要素以外のところをタップされたイベントを検知するプラグイン | 日本の天ぷら情報
。
これだけだとAndroidちゃんは動くのにiPhoneちゃんは動かないという謎の現象がおこったので、暫定対応としてClickイベントをしたい要素に対してCSSのpointerを追加してあげたら動きました。
.css('cursor','pointer');
動いたソース
(function($){
$.fn.skOuterClick = function(method) {
var methods = {
init : function (handler) {
var inners = new Array();
if (arguments.length > 1) for (i = 1; i < arguments.length; i++) {
inners.push(arguments[i]);
}
return this.each(function() {
var self = $(this);
var _this = this;
var isInner = false;
// Bind click event to suppress
function onInnerClick(e){
isInner = true;
};
self.on('click touchend', onInnerClick);
for (var idx in inners) inners[idx].on('click touchend',onInnerClick);
// Bind click elsewhere
$(document).on('click touchend', function(e){
if (!isInner) handler.call(_this, e);
else isInner = false;
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'function') {
return methods.init.apply(this, arguments);
} else {
$.error('Method "' + method + '" does not exist in skOuterClick plugin!');
}
};
})(jQuery);
$(function(){
$("input#search_input").click(function(event){
event.stopPropagation();//外側クリックイベントの発生防御
$("#my_search_contents").show();
}).css('cursor','pointer');
$("#my_search_contents").skOuterClick(function(){
$(this).hide();
