以下のようなHTMLがあって、<p id="aaaa">で囲まれた部分をクリックしたら

プルダウンを表示して、それ以外をクリックしたら表示を消す際に
どうしたらよろしいでしょうか?

<body id="dddd">
<p id="aaaa">
<span>選択</span>
</p>
<script>
document.getElementById("aaaa").onmousedown = test;
function test(e){
{document.getElementById("cccc").style.visibility="visible"}

}
document.getElementById("dddd").onmousedown = aaa;
function aaa(e){
{document.getElementById("cccc").style.visibility="hidden"}
}

</script>
<div id="cccc">
<ul>
<li><a href="/aaa/"><span>★</span>BBB</a></li>
</ul>
</div>

回答の条件
  • 1人2回まで
  • 登録:2008/12/02 20:47:30
  • 終了:2008/12/03 10:46:48

回答(1件)

id:xcaqhbaj No.1

xcaqhbaj回答回数13ベストアンサー獲得回数12008/12/02 23:21:43

ポイント60pt

こんなんでどうでしょう。

<script>
var flag = false;

document.getElementById("aaaa").onmousedown = test;
function test(e){
	{document.getElementById("cccc").style.visibility="visible"}
	flag = true;
}

document.getElementById("dddd").onmousedown = aaa;
function aaa(e){
	if(flag==false){
		{document.getElementById("cccc").style.visibility="hidden"}
	}
	
	flag = false;
}
</script>

単に外部にフラグを持って、p内でのイベントならbody内での処理を弾いただけです。

変数としてフラグを利用するのを避けたければ、setAttributeを用いて属性をフラグとして追加すると良いと思います。

id:hopefully

ありがとうございます。

ですが、これだとプルダウンの中のリンクが動かないような

気がするのですがプルダウンのリンクも有効に出来ないでしょうか?

2008/12/03 00:39:10
  • id:xcaqhbaj
    表示切り替えの部分に気をとられていて失念していました。
    申し訳ありません。

    <a href="/aaa/"><span>★</span>BBB</a>

    これを

    <a onmousedown="flag=true;" href="/aaa/"><span>★</span>BBB</a>

    こうするとリンク押下も除外されます。
    他にも除外したい所があればタグにonmousedown="flag=true;"を追加すればいいです。
  • id:hopefully
    ありがとうございます。
    ですが、再度問題がありまして
    プルダウンの数が多くなると
    スクロールバーが存在するじゃないですか?

    それをクリックしたら、リストが消えちゃうのですが
    どうしたら宜しいでしょうか?
  • id:hopefully
    自己解決致しました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません