• 締切済み

CSS3回転済み要素上のevent.x,yについて

■概要 IEのDXフィルターがIE10で廃止されたのをきっかけに、CSS3に手を出し始めました。 回転にはスタイルシートの属性値としてtransfar:rotate([number]deg)を用いますが、この回転を行った要素についておかしな点があったので質問させていただきます。 回転処理を行った要素上でマウスイベント(mousedown,move,up他)の座標メンバ(x,y)を取得すると、意味のわからない座標になっています。 規則性を見つけようとしましたが、効率の良い方法が見つからず悩んでいます。 やりたかったことは、回転済み要素をマウスでD&Dすることですが、マウスダウンの瞬間、座標がすっとんで、要素がワープします。 この現象の原因、仕組み、解決策等、ご回答よろしくお願い致します。m(_ _)m ■以下備考、随時補足させていただきます。 ・動作環境はIE10inWIN7、他は試していない。 ・rotate無しだと期待通りの動作。 ・ありだとたとえrotate(0deg)でもこの現象が起きる。 ■以下ソースコード:ローテートの行を消したりつけたりしてみてください。 <div id=asdf> aaa </div> <script> function SQUARE(){ this.posX = 0; this.posY = 100; } var elm; var square = new SQUARE(); function MainLoop(){ elm.style.left = square.posX; elm.style.top = square.posY; InputQWER(elm.style.left + ", " + elm.style.top); } function InputQWER(str){ var elm = document.getElementById("qwer"); elm.value = str; } function InputZXCV(str){ var elm = document.getElementById("zxcv"); elm.value = str; } function main(){ elm = document.getElementById("asdf"); elm.style.width = 100; elm.style.height = 100; elm.style.background = "yellow"; elm.style.position = "absolute"; //■■■■■■■■■■■■■■■■■■■■■■ ローテートの行 elm.style.msTransform = "rotate(30deg)"; elm.attachEvent("onmousemove", function(evt){ square.posX = evt.x; square.posY = evt.y; InputZXCV(evt.x + ", " + evt.y); }); timer = setInterval("MainLoop()", 100); } setTimeout("main()", 10); </script> <input id=qwer> <input id=zxcv>

みんなの回答

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.2

他の質問者さんにある通り 他のブラウザ(Chrome/Firefox)でも試してみるべきです そしてもしそれでちゃんと動いたらIEのバグだと思って諦めてください

35fa8e3c
質問者

お礼

書き直す技術と時間が揃ったら試します。ありです。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

手元にはCSS3対応ブラウザがfx16しかないので、fx用に書き直してテストしてみました。 clientX、Y、や pageX、Yが親の座標系でのマウス座標、 layerX、Yが要素の回転した座標系でのマウス座標、といった感じでそれぞれ返されるようです。 mousedown時にも同じ座標値が返されるみたいで、ワープという現象は観察されませんでしたが…? (IEは手元にないので、テストできません。)

35fa8e3c
質問者

お礼

わざわざ書き直し&テストして下さってありがとうございます。 IEバグの線を疑ってみます。 fireFoxにはlayerXなるものがあるんですなー IE10にはpageXしかないので・・・。たぶんですが。

関連するQ&A

  • 取得した要素がインライン要素かブロック要素かを判定する方法はないでしょうか?

    下の様に取得した要素が、インライン要素かブロック要素かを判断する方法はないでしょうか?  document.onclick = function(evt){   var e = evt?evt.target:event.srcElement;   for (i in e.parentNode.childNodes){    if(e.parentNode.childNodes[i].nodeType ==1 && e.parentNode.childNodes[i] != e){     if(e.parentNode.childNodes[i].style.display =="none"){      alert(e.parentNode.childNodes[i].tagName); /* ブロック要素かインライン要素かを判定したい!*/ /* インライン要素 */      e.parentNode.childNodes[i].style.display = "inline"; /* ブロック要素 */      e.parentNode.childNodes[i].style.display = "block";     }else{      e.parentNode.childNodes[i].style.display = "none";     }    }   }  }

  • ハイライト表示をしたい

    2度目の投稿(前回の投稿 http://oshiete1.goo.ne.jp/qa5506744.html)になりますが、指定の文言を色を変えて目立つように(以下ハイライト表示)させたいと思っています 最初に作った物はタグの中(altの中)まで置換をしてしまい、HTMLがくずれるという始末・・・ そこでこのサイトで質問した所、以下のスクリプトを教えて頂きました ところがfirefoxだと動くのですが、IE(IE6しか入っていない環境で使いたい)では動きません 色々調べたところ「フレーム越しの要素コピーは,FFではできて,IEではできないらしい」というのが原因じゃないかという所まで辿り着きました まだjavascript初心者で勉強中な為、教えて頂いたスクリプトも全部理解している訳ではありませんが、どなたか解決方法を教えて頂けないでしょうか 何卒宜しくお願い致します 以下教えて頂いたスクリプト <!-- var str; function left_load(){ if(str){ search(left.document.getElementsByTagName("body")); } } function search(elm){ for(var i=elm.length-1;i>=0;i--){ if(elm[i].nodeName=="#text"){ var re=new RegExp(str,"g"); var ss=elm[i].nodeValue; var result = elm[i].nodeValue.indexOf(str); if(result>=0){ var result_str=ss.replace(re,"<span style=\"background:#77ff77;font-weight:bold\">"+str+"</span>"); var newElement = document.createElement("span"); newElement.innerHTML = result_str; elm[i].parentNode.replaceChild(newElement,elm[i]); } }else{ if(elm[i].hasChildNodes()){ search(elm[i].childNodes); } } } } // --> </script>

  • CSSで rotate 値が書き換えられない理由

    javascript で rotate の角度を変化させて描画することができずに困っています。 p の値を読み込ませて、その角度を画面上に反映させるコードを書きました。 document.getElementById('div2').style.transform = "rotateX(" + p + ")deg" ; このような指示を出しても、結果が何も変化しません。 Firefox の最新版を使用しています。 どのような原因で、この問題が起きているか、教えて下さい。 .

    • ベストアンサー
    • CSS
  • select要素のvalueを配列で取得したいです

    select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。 <html> <head></head> <body> <form> <!-- ここに<select name="c1">~<select name="c20">の20個のselectがあるとする --> </form> <input type="button" value="はい" onclick="test(this.form)"> <script type="text/javascript"> function test ( form ) { var values = new Array(); for ( var i=0; i < 20; i ++ ) { var elm = form.elements['c'+i]; values[i] = elm.options[elm.selectedIndex].value; } } </script> </body> </html> このようなサンプルを動かそうとしたのですが、 var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで 「elm is underfind」というエラーが出てしまいます <script> function myForm (form) { var values = new Array(); for ( var i=0; i<20; i++ ) { var elm = form.elements[i]; values[i] = elm.options[elm.selectedIndex].value; document.write(values[i] + "<br />"); } } </script> インデックス名を'c'+iからiにすると取得できるのですが、 ブラウザが読み込みをやめない状態になってしまいます。 select要素のnameはc1から始まりc20と何も換えていません。 何が間違っているのでしょうか。

  • div要素を滑らかに動かしたい

    <div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか? setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }

  • イベントリスナーに設定した関数内で、id属性の値を取得するには

    IEでイベントリスナーに設定した関数で、イベントを発生させた要素のid属性値を取得する方法が分からずに困っています。 記述したコードは下記のようになります。Firefoxではうまく動作しました。 clickHandler内でFirefoxのe.currentTarget.idに対応するような処理はどのように行えばよいでしょうか。 ------------ JavaScript部分 ----------------------- function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } function clickHandler(e) { var id; if (document.all && !window.opera) { // IEの場合に、ここの処理でid属性の属性地 hoge1やhoge2を取得したい。 // id = window.event.srcElement.id; これではだめ } else { id = e.currentTarget.id; } // idに応じた処理 } var elm1 = document.getElementById('hoge1'); var elm1 = document.getElementById('hoge2'); addEvent(elm1,'click',clickHandler,false); addEvent(elm2,'click',clickHandler,false); ------------ HTML部分 ----------------------- <li><a id="hoge1" href="#"><img src="●●" /></a></li> <li><a id="hoge2" href="#"><img src="●●" /></a></li> 先に進むことができずに困っています。よろしくお願いします。

  • jQueryで要素の生のcssを取得する方法

    jQueryの初心者です、宜しくお願い申し上げます。 jQueryのcss(name)で、要素のstyle属性から指定スタイル(name)の値を取得できることは分かったのですが、{ width:50%; }など、比率で指定している属性はpxに変換されて取得されてしまいます。 変換前の%の値を取得する方法はあるのでしょうか? リファレンスを見た所、そのような記述が見当たらなかったため質問させて頂きました。 一応、 var block_style_str = $('.block').attr('style'); var block_style_array = block_style.trim().split(';'); こんな風にすれば、文字列ベースで自由に取得できますが、jQueryらしいスマートな方法があれば教えて頂きたいです。 詳しい方、ご教授の程、何卒、宜しくお願い申し上げます。

  • イベント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オブジェクトはどうなるのでしょうか?ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか?

  • 要素の表示/非表示の実験

    をしてみました。 <input type="button" onclick="f()" value="push"/> <input type="button" onclick="g()" value="push"/> <table> <tr><td>a</td><td>b</td><td>c</td></tr> <tr id="x"><td>x</td><td>y</td><td>z</td></tr> <tr><td>u</td><td>v</td><td>w</td></tr> <tr id="y"><td>x</td><td>y</td><td>z</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> </table> <script> function f() { var x=document.getElementById('x').style.visibility; if(x=='hidden') document.getElementById('x').style.visibility='visible'; else document.getElementById('x').style.visibility='hidden'; } function g() { var x=document.getElementById('y').style.display; if(y!='none') document.getElementById('y').style.display='none'; else document.getElementById('y').style.display='block'; } </script> です。 最初のボタンは単に表示するかどうかだけで位置は消えた場所に詰められません。 次のボタンは消えるとその場所に他の要素が詰められます。しかし消えたものは次にボタンを押しても消えたままです。 消えた場所に要素が詰められしかも再表示できるようにするにはどうしたらいいのでしょうか?

  • プルダウンメニュー日付生成で月の変わり目について

    初心者です。 質問集をいろいろ探して日付生成できたのですが月末、月初がうまくいきません。 イヌでも・・やトホホ・・など探してますがマッチする情報が見つからないのでわかったら教えて下さい。 100にち分を表示するようにしてます。 このソースは短くてシンプルなので気に入ってます、 ======================================== <SCRIPT type="text/javascript"> window.onload = function() { var d, str, elm = document.getElementById('gdate'); var day = new Date(); day.setMilliseconds(24*60*60*1000); for (d=1; d<100; d++) { str = (day.getMonth() + 1) + '/' + (day.getDate() -1); elm.options[d] = new Option(str, str); day.setMilliseconds(24*60*60*1000); } } </SCRIPT><SELECT name="HIDUKE" id="gdate"> <OPTION>日付選択</OPTION> </SELECT> ======================================== あまり複雑にしないで解決する方法ありますか。