質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

358閲覧

Firefoxでjsが誤作動する

massiveGorilla

総合スコア21

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/08/28 15:19

編集2022/01/12 10:55

↓こちらはデモページです。
画像を切り抜きpostするプラグインです。
http://ultimateman.hahaue.com/
これをfirefoxで起動しますと、誤作動があります。
バージョンは55.0.3(最新)で確認できております。
画像アップロード箇所が2箇所あるのですが、1番目の操作は問題なく遂行されます。
しかし2番目に操作した方では、本来画像ドラッグで操作できるべきところがオンマウスで追従してきてドラッグができなくなります。
こちらをドラッグできるようにするにはどうしたらよいでしょうか。
これはfirefoxのみでおこる問題です。
拙いですが、よろしくお願いします。

下記、jsソース

javascript

1var cropbox1 = function(options){ 2 var el = document.querySelector(options.imageBox), 3 obj = 4 { 5 state : {}, 6 ratio : 1, 7 touchmove_bar : 0, 8 touchstart_bar : 0, 9 options : options, 10 imageBox : el, 11 thumbBox : el.querySelector(options.thumbBox), 12 spinner : el.querySelector(options.spinner), 13 image : new Image(), 14 getDataURL: function () 15 { 16 var width = this.thumbBox.clientWidth, 17 height = this.thumbBox.clientHeight, 18 canvas = document.createElement("canvas"), 19 dim = el.style.backgroundPosition.split(' '), 20 size = el.style.backgroundSize.split(' '), 21 dx = parseInt(dim[0]) - el.clientWidth/2 + width/2, 22 dy = parseInt(dim[1]) - el.clientHeight/2 + height/2, 23 dw = parseInt(size[0]), 24 dh = parseInt(size[1]), 25 sh = parseInt(this.image.height), 26 sw = parseInt(this.image.width); 27 28 canvas.width = width; 29 canvas.height = height; 30 var context = canvas.getContext("2d"); 31 context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh); 32 var imageData = canvas.toDataURL('image/png'); 33 return imageData; 34 }, 35 getBlob: function() 36 { 37 var imageData = this.getDataURL(); 38 var b64 = imageData.replace('data:image/png;base64,',''); 39 var binary = atob(b64); 40 var array = []; 41 for (var i = 0; i < binary.length; i++) { 42 array.push(binary.charCodeAt(i)); 43 } 44 return new Blob([new Uint8Array(array)], {type: 'image/png'}); 45 }, 46 zoomIn: function () 47 { 48 this.ratio*=1.1; 49 setBackground(); 50 }, 51 zoomOut: function () 52 { 53 this.ratio*=0.9; 54 setBackground(); 55 }, 56 imgTouch: function () 57 { 58 setBackground(); 59 } 60 }, 61 attachEvent = function(node, event, cb) 62 { 63 if (node.attachEvent) 64 node.attachEvent('on'+event, cb); 65 else if (node.addEventListener) 66 node.addEventListener(event, cb); 67 }, 68 detachEvent = function(node, event, cb) 69 { 70 if(node.detachEvent) { 71 node.detachEvent('on'+event, cb); 72 } 73 else if(node.removeEventListener) { 74 node.removeEventListener(event, render); 75 } 76 }, 77 stopEvent = function (e) { 78 if(window.event) e.cancelBubble = true; 79 else e.stopImmediatePropagation(); 80 }, 81 setBackground = function() 82 { 83 var w = parseInt(obj.image.width)*obj.ratio; 84 var h = parseInt(obj.image.height)*obj.ratio; 85 86 var pw = (el.clientWidth - w) / 2; 87 var ph = (el.clientHeight - h) / 2; 88 89 el.setAttribute('style', 90 'background-image: url(' + obj.image.src + '); ' + 91 'background-size: ' + w +'px ' + h + 'px; ' + 92 'background-position: ' + pw + 'px ' + ph + 'px; ' + 93 'background-repeat: no-repeat'); 94 }, 95 imgMouseDown = function(e) 96 { 97 stopEvent(e); 98 99 obj.state.dragable = true; 100 obj.state.mouseX = e.clientX; 101 obj.state.mouseY = e.clientY; 102 }, 103 imgMouseMove = function(e) 104 { 105 stopEvent(e); 106 107 if (obj.state.dragable) 108 { 109 var x = e.clientX - obj.state.mouseX; 110 var y = e.clientY - obj.state.mouseY; 111 112 var bg = el.style.backgroundPosition.split(' '); 113 114 var bgX = x + parseInt(bg[0]); 115 var bgY = y + parseInt(bg[1]); 116 117 el.style.backgroundPosition = bgX +'px ' + bgY + 'px'; 118 119 obj.state.mouseX = e.clientX; 120 obj.state.mouseY = e.clientY; 121 } 122 }, 123 imgMouseUp = function(e) 124 { 125 stopEvent(e); 126 obj.state.dragable = false; 127 }, 128 zoomImage = function(e) 129 { 130 var evt=window.event || e; 131 var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta; 132 delta > -120 ? obj.ratio*=1.1 : obj.ratio*=0.9; 133 setBackground(); 134 }, 135 imgTouchstart = function(e){ 136 if(e.touches.length > 1){ 137 } 138 else{ 139 stopEvent(e); 140 obj.state.dragable = true; 141 obj.state.mouseX = e.touches[0].pageX; 142 obj.state.mouseY = e.touches[0].pageY; 143 } 144 }, 145 imgTouchmove = function(e){ 146 if(e.touches.length > 1){ 147 } 148 else{ 149 stopEvent(e); 150 if (obj.state.dragable){ 151 var x = e.touches[0].pageX - obj.state.mouseX; 152 var y = e.touches[0].pageY - obj.state.mouseY; 153 var bg = el.style.backgroundPosition.split(' '); 154 var bgX = x + parseInt(bg[0]); 155 var bgY = y + parseInt(bg[1]); 156 el.style.backgroundPosition = bgX +'px ' + bgY + 'px'; 157 obj.state.mouseX = e.touches[0].pageX; 158 obj.state.mouseY = e.touches[0].pageY; 159 } 160 } 161 }, 162 imgTouchend = function(e){ 163 if(e.touches.length == 1){ 164 stopEvent(e); 165 obj.state.dragable = false; 166 } 167 } 168 obj.spinner.style.display = 'block'; 169 obj.image.onload = function() { 170 obj.spinner.style.display = 'none'; 171 setBackground(); 172 173 attachEvent(el, 'mousedown', imgMouseDown); 174 attachEvent(el, 'mousemove', imgMouseMove); 175 attachEvent(document.body, 'mouseup', imgMouseUp); 176 var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel'; 177 attachEvent(el, mousewheel, zoomImage); 178 attachEvent(el, 'touchstart', imgTouchstart,false); 179 attachEvent(el, 'touchmove', imgTouchmove); 180 attachEvent(el, 'touchend', imgTouchend); 181 }; 182 obj.image.src = options.imgSrc; 183 attachEvent(el, 'DOMNodeRemoved', function(){detachEvent(document.body, 'DOMNodeRemoved', imgMouseUp)}); 184 185 return obj; 186};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aro10

2017/08/29 06:21

関連部分の具体的なソースコードと、Firefoxの詳細なバージョンを記載した方が回答を得やすいかと思います。
guest

回答1

0

おそろしいことに imgMouseUp の stopEvent(e); を削除することでfireFoxの誤作動がおこらなくなりました。。。ちょっと魔法過ぎて理解できません。

投稿2017/08/31 00:51

massiveGorilla

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問