htmlクリックdiv内部非表示、クリックdiv外部非表示
実装効果:div内部をクリックして非表示にし、div外部をクリックして非表示にする
ネット上で見つけた方法は基本的に:
このdivのclickイベントを実現し、バブルを阻止する.
documentのclickイベントを実装し、divを非表示にします.
この方法ではバグがあり、クリックした要素のclickも泡が出るのを止めてしまうと効果が得られません.
本淫は別の方法を考えた.focusin,focusoutを用いて実現した.(IEのみonfocusout,onfocusinをサポートしているようです).関連資料を調べます:onfocusout、onfocusinは泡を立てることができます.onfocus,onblurはバブルをサポートしていません.
divを設定してフォーカスを取得し、属性tabindex="-1"を追加します.
ブラウザの違いにかかわらずjqueryを使用します.
var divNode=$(div);
//divフォーカスの設定
divNode.focus();
var t = 0;
divNode.bind("focusout", function() { t = setTimeout(function() { divNode.hide(); }, 0); return false; }); divNode.bind("focusin", function() { if (t != null) { clearTimeout(t); } return false; });
この方法bugは、tabが焦点を合わせると、非表示がトリガーされ、スクロールバーをクリックしても非表示になりません.
ブラウズ表現に違いがあります.
IEの下でアドレスバー、検索バーをクリックすると、隠しがトリガーされます.このdivの内部にフォーカスのない要素をポイントするとfocusoutがトリガーされます.chromeはできません.(FFテストなし、オナニーキモイFF!!)
テストコードは次のとおりです.
歩いて、通りかかって、見に来て、コメントして、勉強します!
ネット上で見つけた方法は基本的に:
このdivのclickイベントを実現し、バブルを阻止する.
documentのclickイベントを実装し、divを非表示にします.
この方法ではバグがあり、クリックした要素のclickも泡が出るのを止めてしまうと効果が得られません.
本淫は別の方法を考えた.focusin,focusoutを用いて実現した.(IEのみonfocusout,onfocusinをサポートしているようです).関連資料を調べます:onfocusout、onfocusinは泡を立てることができます.onfocus,onblurはバブルをサポートしていません.
divを設定してフォーカスを取得し、属性tabindex="-1"を追加します.
ブラウザの違いにかかわらずjqueryを使用します.
var divNode=$(div);
//divフォーカスの設定
divNode.focus();
var t = 0;
divNode.bind("focusout", function() { t = setTimeout(function() { divNode.hide(); }, 0); return false; }); divNode.bind("focusin", function() { if (t != null) { clearTimeout(t); } return false; });
この方法bugは、tabが焦点を合わせると、非表示がトリガーされ、スクロールバーをクリックしても非表示になりません.
ブラウズ表現に違いがあります.
IEの下でアドレスバー、検索バーをクリックすると、隠しがトリガーされます.このdivの内部にフォーカスのない要素をポイントするとfocusoutがトリガーされます.chromeはできません.(FFテストなし、オナニーキモイFF!!)
テストコードは次のとおりです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body >
<div> <span id="test1btn"/> 1div</span><span id="test2btn"/> 2div</span></div>
<div id='test1' style="display:none; background:rgb(0,153,255)">
<div style="width:100px; height:200px; background-color:rgb(204,204,204)"> 1 </div>
</div>
<div id='test2' tabIndex="-1" style="display:none; background:rgb(153,153,153)">
<div style="width:100px; height:200px; background-color:rgb(0,153,255)"> 2 </div>
</div>
<div style="width:100px; height:200px; background-color:rgb(255,204,153)" id="noBubble"> click , 。</div>
<script type="text/javascript">
$(function(){
var divNode2 = $("#test2");
var divNode1 = $("#test1");
var t = null;
$("#test2btn").click(function() {
divNode2.css("display", "block");
// jq focus 。 ？ ， 。 div ？
//divNode2.focus();
//js div 。
document.getElementById("test2").focus();
});
divNode2.bind("focusout", function() {
t = setTimeout(function() {
divNode2.hide();
}, 0);
return false;
});
divNode2.bind("focusin", function() {
if (t != null) {
clearTimeout(t);
}
return false;
});
$("#test1btn").click(function() {
divNode1.show();
return false;
});
divNode1.click(function() {
return false;
});
$(document).click(function(){
divNode1.hide();
});
$("#noBubble").click(function(){return false;});
});
</script>
</body>
</html>
歩いて、通りかかって、見に来て、コメントして、勉強します!