http://oshiete.goo.ne.jp/qa/6681276.html
に関連しますが


divの中に、p、ulが同列にあり
div領域からmouseoutしたらイベントが起きるようにしたいと思っています。

イベントは親要素に伝播するということなので
event.cancelBubble = true;
window.event.cancelBubble=true;
をp,ulのイベントに入れました。

又、各要素のマウス状態の履歴をテーブルに残してみました(下にソース)。
(マウスアウトしたら「x」、オーバーで「o」)



その結果、

バブリング防止策を講じたため
pまたはulのマウスアウトはdivに伝わっていません(ただしFirefoxではダメ?)。

ところがよく見ると
div→p
div→ul
と移動する際、div内ではありますが
divは一旦マウスアウトしてから再びマウスオーバーとなっているようです。


まず、ここまでの理解は間違っていないでしょうか?
そして、境界線をまたぐ際、マウスアウトになるのはどうにもならないのでしょうか?


基本的な質問で申し訳ありませんが、よろしくお願いします。

---------------------------------------------------------------------------------------------

<script style="text/javascript">
function divOn() {
document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'o';
}
function divOff() {
document.getElementById('atDiv').innerHTML=document.getElementById('atDiv').innerHTML+'x';
}
function pOn() {
document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'o';
}
function pOff() {
document.getElementById('atP').innerHTML=document.getElementById('atP').innerHTML+'x';
}
function ulOn() {
document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'o';
}
function ulOff() {
document.getElementById('atUl').innerHTML=document.getElementById('atUl').innerHTML+'x';
}
function stopBubbling() {
event.cancelBubble=true;
stopPropagation=true;
}
</script>


<div onMouseover="divOn();" onMouseout="divOff();" style="background:#fee;padding:1em;height:300px;">div
<p onMouseover="pOn();" onMouseout="stopBubbling();pOff();" style="background:#efe;height:100px;">p</p>
<ul onMouseover="ulOn();" onMouseout="stopBubbling();ulOff();" style=";background:#eef;height:100px;">
<li><a>li</a></li>
<li><a>li</a></li>
</ul>
</div>


<table border="1">
<thead>
<tr>
<th>div</th>
<th>p</th>
<th>ul</th>
</tr>
</thead>
<tbody>
<tr>
<td id="atDiv"><br /></td>
<td id="atP"><br/></td>
<td id="atUl"><br/></td>
</tr>
</tbody>
</table>

このQ&Aに関連する最新のQ&A

A 回答 (4件)

バブリング(イベントフロー)を勝手に止めてはいけません。

かつ、イベントフローを停止する正規の手段は event.stopPropagation() であり、event.cancelBubble は(もともと)IE の独自仕様です。

マウスオーバーとマウスアウトは、どちらをイベントの発生源とするかという視点の違いに過ぎず、本質的に同じイベントです。

・event.target でマウスオーバーが生じたら、event.relatedTarget にはマウスアウトした要素がセットされる
・event.target でマウスアウトが生じたら、event.relatedTarget にはマウスオーバーした要素がセットされる
・IE8 以下の場合、event.fromElement にマウスアウトした要素、event.toElement にマウスオーバーした要素がセットされる

したがって、どちらか一方を document で監視すれば事足りるのです。

// document で mouseover を監視すれば
function onMouseOver (event) {
 // document 内で生じる mouseover と mouseout の両方を全て感知できる
 var over = event.target || event.toElement;
 var out = event.relatedTarget || event.fromElement;
 var tmp;
 
 if (out) {
  // ただしウィンドウ外へ出ていった場合は感知できない
  for (tmp = out; tmp; tmp = tmp.parentNode) {
   if (tmp.id === 'aDiv') break;
  }
  if (tmp) {
   // #aDiv の外に出ていった
  }
 }
 for (tmp = over; tmp; tmp = tmp.parentNode) {
  if (tmp.id === 'aDiv') break;
 }
 if (tmp) {
  // #aDiv の中に入った
 }
 // Selectors API2 を使えばもう少し分かりやすいが割愛
}

もし、どうしても div 自体に onmouseout 属性を書いて「div から出ていった」ことを感知したい場合は、マウスの行き先(mouseout なら event.relatedTarget または event.toElement で分かる)が、div の中にないことをテストすれば良い。この辺は Dreamweaver の吐き出すコードでも昔からやっていることです。

<div onmouseout="
 if (mouseIsOutside.call(this, event)) {
  // div から出ていった
 }
">...</div>

function mouseIsOutside (event) {
 var r;
 var c;
 try { // DOM3 Core (Firefox, Opera10, Safari4)
  c = event.currentTarget;
  r = event.relatedTarget;
  return ! r || ! r.isSameNode(c) && 0 === (r.compareDocumentPosition(c) & Node.DOCUMENT_POSITION_CONTAINS);
 }
 catch (err) {
  try { // MSHMTL (IE, Opera9)
   c = this;
   r = event.toElement || event.relatedTarget;
   return ! r || c !== r && ! c.contains(r);
  }
  catch (err) { // DOM1 Core (Safari3)
   c = event.currentTarget;
   r = event.relatedTarget;
   while ((r = r.parentNode)) if (r === c) break;
   return ! r;
  }
 }
}

バブリングしない mouseenter、mouseleave(IE 由来で DOM3 Events に収録予定)を使っても良いのですが、いずれにせよバブリングを使えるなら document で一括監視でき、load やノードの挿入を監視してイベントハンドラを付け足す……のような変な作業をせずに済みます。

この回答への補足

詳しいご回答ありがとうございます。
documentで監視するというのがよさそうですね。
いろいろ試してみます。

補足日時:2011/04/26 11:21
    • good
    • 0
この回答へのお礼

返答ありがとうございます!
今、別の要件が入ったので、後で改めてお礼を述べさせていただきます。

お礼日時:2011/04/22 11:59

すみません、訂正します。



>onmouseoutのかわりに、onmouseleaveというフックがあります。

フックではなくハンドラです。
(フックは別の言語、APIの呼び方でした)

この回答への補足

ありがとうございます。
onmouseleaveというのは初めて知りました。
使えそうですね。

補足日時:2011/04/26 11:19
    • good
    • 0
この回答へのお礼

返答ありがとうございます!
今、別の要件が入ったので、後で改めてお礼を述べさせていただきます。

お礼日時:2011/04/22 11:59

>まず、ここまでの理解は間違っていないでしょうか?


その通りです。
ツールチップやプルダウンメニューなどを表示・非表示させる場合によくある問題です。


>そして、境界線をまたぐ際、マウスアウトになるのはどうにもならないのでしょうか?
その問題に対応するために、
onmouseoutのかわりに、onmouseleaveというフックがあります。

onmouseleaveに対応していないブラウザでは、
私はevent.target、event.srcElementからparentNodeを調べていき、
onmouseoutをセットした要素と同じ物があればmouseoutしていないという判断、
同じ要素がなければ完全に外に出たとして、mouseout処理を続行
としています。

内側の要素でさらにonmouseoverやonmouseoutイベントを処理している場合で、イベントバブルを停止させている場合は、
target|srcElementがうまく取得できないこともあるので、
タイマーを使って1ミリ秒後にカーソルの位置を判断する、という方法をよく使っています。

この回答への補足

ありがとうございます。
「タイマーを使って1ミリ秒後にカーソルの位置を判断する」というのは考えました。
色々試してみます!

補足日時:2011/04/26 11:19
    • good
    • 0
この回答へのお礼

返答ありがとうございます!
今、別の要件が入ったので、後で改めてお礼を述べさせていただきます。

お礼日時:2011/04/22 11:59

この回答への補足

ありがとうございます!
基本的なことが詳しく書かれていますね。
色々試してみたいと思います。

補足日時:2011/04/26 11:17
    • good
    • 0
この回答へのお礼

返答ありがとうございます!
今、別の要件が入ったので、後で改めてお礼を述べさせていただきます。

お礼日時:2011/04/22 11:58

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QDHCPに関するイベントログの意味が不明です

【ネットワークセキュリティ 】というぱっとしないカテゴリですが、ここが一番近いので、これで質問します。

特に支障があるわけではないのですが、イベントログにあがるDHCPのメッセージについて意味がわからず、気持ち悪い思いをしています。20年にわたり汎用機の適用業務の三流SEだったのにもかかわらず恥ずかしい限りです。

次のようなシステム環境です。
(1)Window XP SP2 のPC2台
(2)ネットワーク:FTTHでブロードバンドルータを使い、1台は有線、もう一台は無線で接続しています。
(3)ウィルスバスター2007で、プロファイルは「家庭内ネットワーク2」のデフォルト設定です
(3)ブロードバンドルータでの、DHCPのリース期間は48時間です。
(4)毎朝、2台のPCを立ち上げ使用し夜にはシャットダウンしています。
(5)ネットワーク接続時、1台は 192.168.11.2 もう一台は 192.168.11.3 が割り当てられ、ルータ自身は 192.168.11.1です。
どちらから立ち上げても、同じIPアドレスが割り当てられます。

そして、このような環境と運用のなかで、2台とも、次に示すイベントログがあがります。ネットワークカードのアドレスは伏字にしています。

■エラー ソースDHCP イベントID 1002
ネットワーク アドレスが 00XXXXXXXXXX のネットワーク カードに対する IP アドレス 192.168.11.2 のリースが、DHCP サーバー 192.168.11.1 から拒否されました。DHCP サーバーは DHCPNACK メッセージを送信しました。

■警告  ソースDHCP イベントID 1003
ネットワーク アドレスが 00XXXXXXXXXX のネットワーク カードに対して、ネットワーク (DHCP サーバー) から割り当てられたアドレスを書き換えることができませんでした。 次のエラーが発生しました:
セマフォがタイムアウトしました。 ネットワーク アドレス (DHCP) サーバーから引き続き、アドレスの取得を 試みます。

立ち上げる日によって、どちらかがログに書かれます。

また、警告の「セマフォがタイムアウトしました」は有線接続の方、無線接続は「この操作はユーザーによって取り消されました」と出ます。

ログのほうからmicrosoftのほうにアクセスしても、英語力に乏しい私は手に負えず、技術情報にキーワードでアクセスしても、現象とマッチしたものには出会えません。

ネットワークにお詳しい方、よろしくお願いします。

【ネットワークセキュリティ 】というぱっとしないカテゴリですが、ここが一番近いので、これで質問します。

特に支障があるわけではないのですが、イベントログにあがるDHCPのメッセージについて意味がわからず、気持ち悪い思いをしています。20年にわたり汎用機の適用業務の三流SEだったのにもかかわらず恥ずかしい限りです。

次のようなシステム環境です。
(1)Window XP SP2 のPC2台
(2)ネットワーク:FTTHでブロードバンドルータを使い、1台は有線、もう一台は無線で接続しています。
(3)ウィ...続きを読む

Aベストアンサー

DHCPの動作は通常,

立ち上げたPCは以前割り当てられたIPアドレスを割り当ててほしいとDHCPサーバに問い合わせます。そのIPアドレスが割り当てられないとDHCPサーバが判断すると1番目のメッセージがでます。

2番目はDHCPサーバが割り当てたIPアドレスにPCのネットワークカードが変更されなかった結果です。

DHCPサーバーは通常は同じMACアドレスには特別な事情(IPが足りずに他に使われているなど)が無い限り同じIPを割り当てる動作をします。

上記のエラーがでても最終的にはちゃんと接続できているようなので,最初のDHCPとPCとのネゴシエーションに失敗してこのログが残っているのだとおもいますので,気にしなくて良いと思います。

Qhttp://www.ajaxmail.jp/のAjaxmailを使用

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type="text/javascript" src="js/protoculous-effects-packer.js"></script>
<script type="text/javascript" src="js/lightview.js"></script>
</head>

<body>

<div style="margin:200px">

<form name="form1" action="http://xxxx.com/ajaxmail-utf-8/ajaxmail/sample.php" method="post">
<input type="hidden" name="str" value="xxxx@xxxx.xx.xx">
</form>

<a href='JavaScript:document.form1.submit()' rel='iframe' title='送信フォームタイトル :: 送信フォーム説明文 :: width: 750, height: 600' class='lightview'>text1</a>
</form>

フォームをポップアップさせるJavaScriptとPOSTを制御するJavaScriptとの組み合わせの仕方がよくわかりません。

恐れ入りますがどなたかご教授頂けると幸いです

http://www.ajaxmail.jp/のAjaxmailを使用いたしております。リンクをクリックするとメールフォームがポップアップで表示されるのですが、このフォームのスクリプトに対して最初のリンクのクリックと同時にPOSTでデータを送りたいと思っておりますがうまく行きません。

ソースは以下


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>AjaxMail:Ajaxを活用したフリーPHPメールフォーム</title>
<li...続きを読む

Aベストアンサー

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_Mail="hogehoge3@fuga.fuga";
form_data="3";
break;
default:
Kanrisya_Mail="";
form_data="";
break;
}
document.getElementById("E-mail").value=Kanrisya_Mail;
document.getElementById("内容").value=form_data;
Lightview.show({href:'#ajaxForm',rel:'inline',title:"送信フォーム",
options:{autosize:true,topclose:true}});
document.observe('lightview:opened',function(){
new Spry.Widget.ValidationTextField("checkText1", "none", {validateOn:["change"]});
new Spry.Widget.ValidationTextField("checkText2", "email",{validateOn:["change"]});
});
}
function ajaxsend(){
var form_data={"E-mail":document.getElementById("E-mail").value,
"内容":document.getElementById("内容").value};
Lightview.show({href:'./ajaxmail/sendmail.php',rel:'ajax',
options:{autosize: true,topclose:true,ajax:{parameters:form_data,}}
});
}
</script>
</body>
</html>

===続き===
<p><strong>内容</strong><br />
<textarea cols="50" rows="10" name="内容" id="内容">
</textarea>
</p>
<p><input type="submit" value="確認する"></p>
</form>
<script type="text/javascript" language="javascript">
function ajax_popup(no){
var form_data,Kanrisya_Mail;
switch(no){
case 1:
Kanrisya_Mail="hogehoge1@fuga.fuga";
form_data="1";
break;
case 2:
Kanrisya_Mail="hogehoge2@fuga.fuga";
form_data="2";
break;
case 3:
Kanrisya_...続きを読む

Q写真集発売イベントでの特典の意味が解りません???

某書店で行われる写真集発売記念イベントについて。

2冊購入すると「ツーショットチェキ1枚」、3冊購入すると「ミニ撮影会」と書店のHPに記載されてました。

ツーショットチェキとは、タレントと客と二人並んで、係員に撮影してもらうんでしょうか? チェキって何ですか??

ミニ撮影会とは、ツーショット撮影ではなく、タレントさんだけをカメラ持参で撮影するのでしょうか? 

Aベストアンサー

「 チェキ 」は富士フイルムが発売しているインスタント
カメラのことで、その場ですぐに写真が見れるポラロイド
のようなものです。いわゆるポラロイドよりサイズが小さ
いので現場で扱いやすいことと、バンバン撮るのに適して
いるので、発売記念イベントの現場ではよく使われています。

 ですので、ツーショットチェキに関してはご想像の通りです。

 ミニ撮影会についてもご想像の通りです。たいていは
イベント終了後、参加者が別室に移動し、そこで10分
程度自由に撮影することができます。基本的にムービー
は禁止で、ポーズもあまり自由にお願いできなかったり
しますが、目線くらいはくれるのでファンには好評です。

参考URL:http://www.fujifilm.co.jp/instant/index.html

Qhttp://www.skuare.net/test/horizont

http://www.skuare.net/test/horizontinyscrolling.html
上記のサイト様で使用しているjavascriptを使ってデザインを考えています。

上記のサイト様は、メニューとコンテンツが同じフレーム内(階層)にありますが、
これを、メニューとコンテンツを別々のフレームに入れ(コンテンツ部分はインフレームに入れたいです。)、メニューを常に見える状態にしたいです。
(添付画像参照)

上記の状態までは、問題なくページを作れています。
しかし、色々試してはみたのですが、フレームに入れるとなかなかうまく行かず困っています。
どのように直せば良いでしょうか…

どうぞ宜しくお願い致します。

Aベストアンサー

このjavascriptを使って親からiframeコンテンツ内部をスクロール制御するよう
直すのは結構たいへんそうです。

私なら、iframeコンテンツのhtmlの中に、このjavascriptと、
スクロールナビゲーションリンクのタグを非表示で、そのまんま
設置しておいて、


親にも設置したナビゲーションリンクから、iframe内のナビゲーションリンク
をjavascriptで突っつきます。

QイベントID 3224 の意味がわかりません

会社で、データサーバ機として、使っている WindowsNT Server4.0 機なんですが、いつからか、システムのイベントログにきまったエラーが出ています。
 ソース:NETLOGON
 分類 :なし
 ID  :3224
 「次のエラーが発生したため、アカウント AAAAA$ のマシン アカウント パスワードの 変更に失敗しました:
 現在、ログオン要求を処理できるログオン サーバーは ありません。」

AAAAA はデータサーバのコンピュータ名です。
これについて、詳しい方、詳しいホームページ等ありましたら教えて下さい。

Aベストアンサー

MicrosoftのSuportServices の
http://support.microsoft.com/default.aspx?scid=%2Fisapi%2Fgomscom%2Easp%3Ftarget%3D%2Fjapan%2Fsupport%2Fkb%2Farticles%2Fjp186%2F5%2F45%2Easp&LN=JA

でどうでしょう。
ちなみに、MicrosoftのSuportServices で
「NETLOGON」で検索し、「3224」で絞込み検索しました。

参考URL:http://support.microsoft.com/default.aspx?scid=%2Fisapi%2Fgomscom%2Easp%3Ftarget%3D%2Fjapan%2Fsupport%2Fkb%2Farticles%2F

Qhttp://news.com.com/ みたいなナビゲーションは?

http://news.com.com/ のサイトの上部にあるような、マウスを持っていくとその下にサブメニューがポンポンと出てくるような動きは、どのような仕組みでやっているのでしょうか?
ヒントだけでも教えてください。お願いします。

Aベストアンサー

CSS と JavaScript を組み合わせています。
(CSS や JavaScript を無効にして、動作の違いを確認。)

たぶん、CSS で要素の表示するしないを設定し、
JavaScript でそれを制御しているのでしょう。

Qイベントevt?evt.target:event.srcElement;の意味合い

以下の理解で合っているのでしょうか?
よくイベントの取得で

エレメント.onclick = function(evt){
var e = evt?evt.target:event.srcElement;
}
でeにイベントオブジェクトの発生元要素をセットしているのを見かけますが、
これは、ブラウザーの違いの吸収なのでしょうか?

firefoxでは、イベントハンドラー関数にイベントオブジェクトが渡されるので、渡されたイベントオブジェクトよりevt.targetで発生元要素をセットし、一方IEでは、eventという名前のオブジェクトが存在している(?)ので、イベントハンドラー関数にイベントオブジェクトが渡されず、event.srcElementで発生元要素をセットする。
 ※Opera、Safariは何でも良い

IEの場合、後から、イベントが追加されたらeventオブジェクトはどうなるのでしょうか?ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか?

Aベストアンサー

> ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか?
attachEvent() を使えば、複数のイベントハンドラを定義できそうです。(未検証)
また、attachEvent() の第一引数からイベントオブジェクトを取得できる、とbabu_babooさんに教わりました。
http://okwave.jp/qa5081024.html?ans_count_asc=1

ただ、attachEvent は実行順が不定という欠点があるので、現実的には「出来ない」という結論になると思います…。

addEventListenerとattachEventでは実行される順番が違う at HouseTect, JavaScripter Blog
http://hisasann.com/housetect/2008/09/addeventlistenerattachevent.html
IEのイベント実行順序は不定? - inamenaiの日記
http://d.hatena.ne.jp/inamenai/20080915/p1

IEが addEventListener() に対応してくれればいいのですが…。

> ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか?
attachEvent() を使えば、複数のイベントハンドラを定義できそうです。(未検証)
また、attachEvent() の第一引数からイベントオブジェクトを取得できる、とbabu_babooさんに教わりました。
http://okwave.jp/qa5081024.html?ans_count_asc=1

ただ、attachEvent は実行順が不定という欠点があるので、現実的には「出来ない」という結論になると思います…。

addEventListenerとattachEventでは実行される順番...続きを読む

Q元々あるデモデータ(http://css-tricks.com/dow

元々あるデモデータ(http://css-tricks.com/downloads/)に変更を加えたいです。
デモ二番目【Grid Accordion】を参考に少しいじっているのですが、なぜだか<a>~</a>のリンクが効きません。具体的には…

オリジナルは、
<dl>
<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

...
</dl>

こういった作り方で、<dd>の中はテキストだけが入っている状態です。
やりたい事は、この<dd>の中に、更に

<ul>
<li><a></a></li>
</ul>

を入れて変更を加えて、最終的に<a>のURLにジャンプさせたいのですが、なぜだかこの<a>のリンクが効かなくなりました。

リンクを正常に効くようにするにはどうすればいいでしょうか?
おそらくセットになっていたinfogrid.jsの一部を変えればいいと思ったのですが、ここで詰まっています。
アドバイスよろしくお願いします。

Aベストアンサー

ざっとしか見ていませんが…

16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな(正確には親要素がclass="curCol"の)カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。 ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみてください。
このため、他のリンクタグも(親要素がclass="curCol"でないので)一律にキャンセルされてしまっています。

キャンセルしているのは
 e.preventDefault();
の行の部分ですので、それをコメントアウトすればリンクは効くようになりますが、もともとの機能が損なわれてしまいます。


両立させるのなら、(↑)の画像のリンクと他のリンク要素を識別できるようにして(画像リンクだけに共通のclassを与えるとか)、それ以外はキャンセルしないようにすればよろしいかと思います。


きちんと全部を読み取って回答しているわけではありませんので、見落としがあったらご容赦。

ざっとしか見ていませんが…

16行目の
// clicking image of inactive column just opens column, doesn't go to link
以下の数行にa要素をクリックした場合の処理が記してあります。
簡単に書けば、アクティブな(正確には親要素がclass="curCol"の)カラムではないリンク要素の場合はキャンセル。
アクティブならリンクを実行。 ということで各カラムのトップの画像部分のリンクタグを想定して作成されているようです。
カラムがアクティブな時とそうでない時に、画像をクリックすると動作が違うのを確認してみ...続きを読む

QEnableEventsの意味は

VBAを勉強中の初心者です。

Excelでプロシージャの中に書かれている次の文は、どういう意味を持っているのですか。

Application.EnableEvents = False

'処理命令文

Application.EnableEvents = True

EnableEventsとは、何を可能にさせると言っているのでしょうか。
= Falseとは、何が違うと言っているのでしょうか。

割り込み禁止で、ここで処理が実行されている間は、他の余分なことは受け付けないと言っているのかと勝手な想像もしていますが、どうでしょうか。

教えて下さい。よろしくお願いします。

Aベストアンサー

こんにちは。

VBAを勉強中としたら、その辺りは、自然に分かってくるものだから、ちょっと早いかもしれませんね。イベント自体はお分かりになっていますね。後で、マニュアルやヘルプで確認してください。

他のアクションを起動にして、別の動作をするというものです。

Private Sub Worksheet_Change(ByVal Target As Range)

この場合は、Enter を押したときに発生します。

それ自体は、受身でよいのですが、そのマクロ自体が、別のセルを代入したりすると、もうひとつのイベントを発生させてしまい、プロシージャの中で、無限ループに近い形になっています。(ただし、完全な無限ループではないので、1万回程度で止まります。)そこで、その無限ループをとめなくてはならないので、そうした、

Application.EnableEvents = False
ということをします。

逆に、
Application.EnableEvents = True で戻してあげないと、今度は、そのイベント・ドリブン型プロシージャはうんともすんとも言わなくなってしまいます。

>割り込み禁止で、ここで処理が実行されている間は、他の余分なことは受け付けない

その範囲内だけ、イベントを発生させないということです。
厳密には、そういったものには、以下のようなものがあります。
Application.Interactive = False

.

こんにちは。

VBAを勉強中としたら、その辺りは、自然に分かってくるものだから、ちょっと早いかもしれませんね。イベント自体はお分かりになっていますね。後で、マニュアルやヘルプで確認してください。

他のアクションを起動にして、別の動作をするというものです。

Private Sub Worksheet_Change(ByVal Target As Range)

この場合は、Enter を押したときに発生します。

それ自体は、受身でよいのですが、そのマクロ自体が、別のセルを代入したりすると、もうひとつのイベントを発生させてしま...続きを読む

Qhttp://www.rapty.com/

http://www.rapty.com/

上記のサイトのメインコンテンツである、左上の箇所ですが、一定の時間が経過すると右のサムネイルアイコンが切り替わり大きい画像もそれに合わせて切り替わります。

さらに、右のサムネイルをマウスオーバーすると、それにも合わせて各画像が切り替わる上、どのバナーをクリックしてもジャンプできるようにもなっています。

これはもちろんフラッシュで作られているのですが、これをJavaScriptで全く同じようにする事は可能でしょうか?

Aベストアンサー

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridge #eee; position:relative; overflow:hidden;}

#navi { list-style:none; margin:2px; padding:0; position:absolute; right:0; z-index:10; font-size:0; }
#navi li { padding:2px; padding-left:15px; }
#navi li.active { background-color:#f44; }
#navi li a { display:block; text-decoration:none; }
#navi li img { width:200px; height:70px; _height:69px; border:0; }

#content { list-style:none; margin:0; padding:0; position:relative; }
#content li { position:absolute; width:780px; height:300px; display:none; overflow:hidden; background-color:#cfe;}
#content li a { display:block; width:100%; height:100%; text-decoration:none; color:#000; }
#content li.active { display:block; }

li#mask { background-color:#fff; display:none; z-index:5; filter:alpha(opacity=0); opacity:0; }
</style>
</head>
<body>
<div id="wrapper">
<ul id="navi">
<li class="active"><a href="test1.html"><img src="A.jpg" alt="#"></a></li>
<li><a href="test2.html"><img src="B.jpg" alt="#"></a></li>
<li><a href="test3.html"><img src="C.jpg" alt="#"></a></li>
<li><a href="test4.html"><img src="D.jpg" alt="#"></a></li>
</ul>
<ul id="content">
<li id="mask"></li>
<li class="active">
<a href="test1.html">
content1
<br>ここは画像1枚でもいいし、
<br><strong>文章でもいい。</strong>
<br>ただし、はみ出しても表示されない。
<br><img src="E.jpg" alt="picture" style="margin-top:150px;">
</a>
</li>
<li>
<a href="test2.html">content2</a>
</li>
<li>
<a href="test3.html">content3</a>
</li>
<li>
<a href="test4.html">content4</a>
</li>
</ul>
</div>

<script type="text/javascript">
<!--
(function() {
var u = document.getElementById('navi');
var mask = document.getElementById('mask');
var navs = document.getElementById('navi').getElementsByTagName('LI');
var cnts = document.getElementById('content').getElementsByTagName('LI');
var grovalTid, maskTid, duration = 5000;
try { u.addEventListener("mouseover", func, false);
} catch(e) { u.attachEvent("onmouseover", func); }
grovalTid = setTimeout(change, duration);

function func(evt) {
var t = evt.target || evt.srcElement;
if (t.nodeName != 'IMG') return;
while (t.nodeName != 'LI') t = t.parentNode;
if (modeSet(t, 0)) return;
fadeIn(t);
}

function fadeIn(e) {
var i, k;
clearTimeout(grovalTid);
if (maskTid) clearInterval(maskTid);
maskTid = setInterval(fade(), 40);
for (i=0; i<navs.length; i++) {
k = e==navs[i]?1:-1;
modeSet(navs[i], k);
if (cnts[i+1]) modeSet(cnts[i+1], k);
}
}

function fade() {
var o = 95;
setOpacity(mask, o);
mask.style.display = 'block';
return function() {
o -= 5;
o = Math.max(o, 0);
setOpacity(mask, o);
if (o > 0) return;
clearInterval(maskTid); maskTid = null;
mask.style.display = 'none';
grovalTid = setTimeout(change, duration);
}
}

function change() {
for (var i=0; i<navs.length; i++) if (modeSet(navs[i], 0)) break;
fadeIn(navs[++i % navs.length]);
}

function modeSet(e, n) {
if (n>0) { e.className += ' active';
} else if (n==0) { return e.className.match(/(^|\s)active$/);
} else { e.className = e.className.replace(/(^|\s)active$/, ''); }
}

function setOpacity(e, o) {
e.style.filter = 'alpha(opacity=' + o + ')';
e.style.opacity = o / 100;
}
})();
//-->
</script>
</body>
</html>

素のままでやってみたらちょっと長くなってしまった。

考え方はいろいろあると思うので、あくまでもたたき台のサンプルです。
hover時の枠の部分を画像でやっていないので、ちょっと似てない。(画像に変えれば似ると思う)
メインの部分は画像一枚なのか、いろいろ書けるようにするのかよくわからん。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#wrapper { width:780px; height:300px; border:2px ridg...続きを読む


人気Q&Aランキング