- 締切済み
外でマウスアップした時のイベント
以下htmlは[up]の上でマウスダウンすると[down]に、[down]の上でマウスアップすると[up]になります。 しかし、[up]の上でマウスダウンして、[down]に変わった後[down]の外でマウスアップすると[down]のままになってしまいます。 このように、外でマウスアップした場合でも[up]の表示としたいのですが、なにかよい方法はないでしょうか？ FlashのAcitoscriptでいうところのreleaseOutsideを検知したいです。 <html> <head> <script> window.onload = function(){ var Drag = 0; i = function(id){ return document.getElementById(id) }; i('o').onmousedown = function(){i('o').innerHTML='[down]'; } i('o').onmouseup = function(){ i('o').innerHTML='[up]'; } } </script> <div id="o">[up]</div> </body> </html>
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 15mm
- ベストアンサー率65% (65/100)
ドラッグ禁止させるなら、 i('o').ondragstart=function(){return false;} でいかがでしょうか。 選択禁止も文字列ドラッグを防ぐのにはいいかもしれません。
- chara0-m
- ベストアンサー率50% (3/6)
すいません。 何度かやっているとなってしまいますね・・・。 No2の回答は、役にたたなそうです。。
お礼
chara0-mさん ご回答ありがとうございます。
- chara0-m
- ベストアンサー率50% (3/6)
＞＞反転させてドラックの様な動作をした際に禁止のマークが出た後でしょうか。IEで発生します。 これに関しては、divの部分でのドラッグの禁止ぐらいで対応するしか ない気がします。 i('o').onmousemove = function(){ return false; } のような感じではどうでしょうか？
- chara0-m
- ベストアンサー率50% (3/6)
こんな感じでどうでしょうか？ <html> <head> <script> window.onload = function(){ var flag = false; i = function(id){ return document.getElementById(id) }; i('o').onmousedown = function(){ flag = true; i('o').innerHTML='[down]'; }; document.onmouseup = function(){ if( flag == false ) return; flag = false; i('o').innerHTML='[up]'; }; } </script> <div id="o">[up]</div> </body> </html>
補足
chara0-mさん ご回答ありがとうございます。 概ね良好なのですが、カチカチいじってるとマウスアップしてるのに[down]のままになる事があります。 どのような動作をさせた時に発生するのか断定は難しいのですが、 反転させてドラックの様な動作をした際に禁止のマークが出た後でしょうか。IEで発生します。
関連するQ&A
- イベントバブル、マウスオーバーなどに関して
http://okwave.jp/qa/q6681276.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>
- ベストアンサー
- JavaScript
- マウスを押している間繰り返す
マウスを押している間繰り返すスクリプトはどう書けばいいのでしょうか？ スクロールボタンを作ろうと思っています。 on(press)とwhileやfor、onMouseup、onMousedownを組み合わせればできるかと思い調べてみたのですが、マウスが押されている間という条件が分かりませんでした。 よろしくお願いします。
- ベストアンサー
- Flash
- 【Javaxcript CSS】擬似フレームサイズをマウスで変更したい
擬似フレームのサイズをマウスで変更したいです。 以前「CSSで指定したwidthをマウスで変更したい」 （http://oshiete1.goo.ne.jp/qa3849904.html） で質問し、頂いたズバリ回答（以下）で実現できるのですが、使っているとマウスが時々くっついてしまいます。 これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } #space { float:left; width:5px; background-color : #ffffff; cursor:E-resize; } </style> </head> <body> <script> window.onload = function(){ var Drag = 0, i = function(id){ return document.getElementById(id) }; i('space').onmousedown = function(){ Drag = 1; } document.onmouseup = function(){ Drag = 0; } document.onmousemove = function(e){ if(!Drag){ return false; } var ev = window.event || e; var W = document.body.offsetWidth || document.documentElement.offsetWidth; var L = parseInt( ev.clientX/W *100, 10); var R = 100 - L; if(L >1 && R > 1){ i('f1').style.width = L + '%'; i('f2').style.width = R + '%'; } } } </script> <div id="f1">f1</div> <div id="f2"> <div id="space"> </div> f2</div> </body> </html>
- ベストアンサー
- JavaScript
- AS3.0でマウスボタンの状態を調べたいのですが、良い方法はないでしょうか
AS3.0になって、releaseOutsideに相当するものがなく、マウスボタンが領域外で離されたことを取得できず困っています。 いろいろ調べてみたんですが、良い方法が見つかりません。 作っているのはドラッグ＆ドロップのスクリプトです。 startDrag()した後、領域外で離されたときにもstopDrag()できるように、stageに対してMOUSE_UPをリスナー登録しています。 my_mc.stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp); function onMouseUp(event:MouseEvent):void { my_mc.stopDrag(); my_mc.stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp); } 通常はこれでうまくいくんだと思いますが、今作っているものには、ステージに選択可能テキストフィールドがあります。 ドラッグ中にそのテキストフィールドの上でマウスボタンを離すと、stageにMOUSE_UPイベントが発生しないようで、stopDrag()が働かず、マウスボタンを離していても、my_mcがくっついてきてしまいます。 ソーテック社の「Flash ActionScript3.0入門ノート」を購入してAS3.0の勉強をしているのですが、そのドラッグ＆ドロップのパッケージ（SimpleDrag2.as）でも、選択可能テキストフィールドを置くと、同じ不具合が出てしまいます。 AS2.0では、releaseOutsideを使っていてうまくいきました。 マウスボタンの状態を取得する方法があれば、ENTER_FRAMEで状態を見張って、stopDrag()することもできると思うのですが、状態を取得する方法が見つかりません。 AS3.0で確実にstopDrag()できる方法をご存知でしたら、教えてください。 よろしくお願いいたします。
- 締切済み
- Flash
- 文字を移動させその位置を表示したい
複数のプログラムを拝借し組み合わせたのですが、以下3点の内容にしたく質問しました。宜しくお願いいたします。 （１）文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。 （２）文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。 （３）動作するのですがエラーが表示されます。エラーの原因は何でしょうか？ <HTML> <HEAD> <STYLE type="text/css"> </STYLE> <SCRIPT language="JavaScript"> <!-- var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; sample.style.top=text1.style.top; sample.style.left=text1.style.left; } document.onmouseup = fOnmousemove; function fOnmousemove() { sClientX.value = event.clientX; sClientY.value = event.clientY; } //--> </SCRIPT> </HEAD> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:relative" id=sample> このオブジェクトが移動します </DIV> <DIV id="test" id=text1 style="position:absolute;font-size:24px; cursor:hand"> </DIV> <SCRIPT language="JavaScript"> </SCRIPT> clientX=<input type="text" id="sClientX"><br> clientY=<input type="text" id="sClientY"><br> </BODY> </HTML>
- 締切済み
- JavaScript
- 「nullまたはオブジェクトではありません」というエラーが出ます。
こんにちは、IE7、VISTAで試しています。 エラーもなく動いたのですが、 sClientXとsClientYの値をフォームメールでデータ送信したくて clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> という部分を<form>内に入れると 「sClientXはnullまたはオブジェクトではありません」 というエラーが出ます。 エラーの原因はなんでしょうか？ <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- var sample; var sClientX; var sClientY; var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; sClientX.value = document.getElementById('sample').style.left; sClientY.value = document.getElementById('sample').style.top; } document.onmouseup = fOnmousemove; function fOnmousemove() { } //--> </SCRIPT> </HEAD> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:absolute" id=sample> このオブジェクトが移動します </DIV> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> </DIV> <form> clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- アクションスクリプト イベントメソッド
お願いします。教えていただきたいのですが、 root.onKeyDown = function() { trace("キーダウン"); } this.onMouseDown = function() { trace("マウスダウン"); } として実行すると マウスダウン と表示されますが、 キーダウン は表示されません。 一体なにがいけないんでしょうか？ 参考になるURLとかあったら教えてください。
- 締切済み
- Flash
- ボタン上でマウスを押している間に、ウィンドウをスクロールしたい
フォームボタンを押している間、インラインフレームのウィンドウをスクロールしたいのですが 思うように動作してくれません。 最初、タグのonmousedown属性とonmouseup属性を使用して 簡単に実装できると思っていたのですが mouseupのイベントがうまく拾えないようで、あきらめました。 下記のようなマウスドラッグのサンプルソースがあったので こちらを改造しようと思ったのですが、いろいろいじってみてもだめでした。 「マウスが離された」というイベントはどうすれば拾えるのでしょうか？ IE限定の動作を予定しています。 よろしくお願いいたします。 <script type="text/javascript"> //tab→全角スペース //マウスをクリックして動かしている間だけスクロールする window.document.onmousemove = scrollSubWindow; window.document.onmouseup = scrollOff; scrollFlag = false; function scrollOn() { scrollFlag = true; } function scrollOff() { scrollFlag = false; } function scrollSubWindow() { if( !scrollFlag ) return; Dummy.scrollBy( 0, 10 ); return false; } </script> <iframe src="dummy.html" name="Dummy" width=200 height=200></iframe> <input type="button" value="下へ" onMousedown="scrollOn()" style="width: 200px; height: 200px;">
- 締切済み
- JavaScript
- onmousedownを自動で押して、イベントを処理するには
某ページにて、以下のようなhtmlがあります。 <A onmousedown="Part('0384',true);" href="javascript:id(0);">あ</A> <A onmousedown="Part('r357',true);" href="javascript:id(0);">コレ</A> <A onmousedown="Part('erjl',true);" href="javascript:id(0);">あ</A> <A onmousedown="Part('alea',true);" href="javascript:id(0);">コレ</A> 自動でコレって書いてあるリンクだけ押して、 onmousedown処理をするには、どうしたらよいでしょうか。 var atag=document.links; for (i in atag){ kore = atag[i].innerText; if(kore=="コレ"){ atag[i].onmousedown(); } } とやると、どうも違うようで。。 繰り返し処理は、おいといて、 マウスダウンをjavascriptで押させる場合、どのようにしたらよいか だけでも、教えて頂けると・・・ すみません。
- ベストアンサー
- JavaScript
- javascriptのマウスイベントに関して質問です。
javascriptのマウスイベントに関して質問です。 マウスが画像の上に乗ったら画像を切り替え、画像から離したら元の画像に戻すような プログラムを作りたいのですが、うまくいきません。 マウスをもっていっても画像が切り替わりません。 プログラムは以下のように作りました。 どこが間違っているのかまったくわかりません。 よろしくお願いします。 <html> <head> <title>画像切り替え</title> <script type="text/javascript"> <!-- function changeillustsikaku() { document.gazoukirikae.src="./sikaku.gif"; } function changeillustmaru() { document.gazoukirikae.src="./maru.gif; } //--> </script> </head> <body> <h2>画像切り替え</h2> <div> <img src="./sikaku.gif" name="gazoukirikae" alt="四角" onMouseOver="changeillustmaru()" onMouseOut="changeillustsikaku()"> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
15mmさん ご回答ありがとうございます。 問題事象が解決しました。