teratail
回答率
85.47%
質問するログイン新規登録
トップHTML5に関する質問JQueryでtableを利用したドットエディタを作り、PC、スマートフォン両方で動作させたい。

編集履歴

回答編集履歴

3

コード修正

2016/05/07 16:05

投稿

manabufukai
manabufukai

スコア700

test CHANGED
@@ -1,4 +1,4 @@
1
- なんだか色々回りくどいことをしているかな…？という感覚がありますね…。
1
+ ちょっと必要の無い処理が色々混じっているのでそのあたりも整えながら…
2
2
 
3
3
  ```
4
4
 
@@ -78,15 +78,13 @@
78
78
 
79
79
 
80
80
 
81
- まとめつつ、自分だったらこうするかな？というコードも書かせていただきます。（※修正しました）
81
+ まとめつつ、自分だったらこうするかな？というコードも書かせていただきます。
82
+
83
+ （※5/7修正しました）
82
84
 
83
85
  ```
84
86
 
85
- $('td').each(function (i) {
86
-
87
- i = i+1;
88
-
89
- $('.body_' + i+',.sleeve_' + i).on('touchmove', function(event) {
87
+ $('.dottlanslate td').on('touchmove', function(event) {
90
88
 
91
89
  event.preventDefault();
92
90
 
@@ -94,27 +92,37 @@
94
92
 
95
93
  var target = document.elementFromPoint(touch.clientX, touch.clientY);
96
94
 
97
- var cn = target.classList; // （IE10＋）
95
+ if(target){
98
96
 
99
- var drawTrg = $(target).hasClass('dot') ? '.'+cn[1] : '.'+cn[0];
97
+ var cn = target.classList; // （IE10＋）
100
98
 
101
- if( !drawTrg.match(/body_|sleeve_/) ) return;
99
+ var drawTrg = $(target).hasClass('dot') ? '.'+cn[1] : '.'+cn[0];
102
100
 
103
- $(drawTrg).text(text);
101
+ if( !drawTrg.match(/body_|sleeve_/) ) return;
104
102
 
103
+ $(drawTrg).text(text);
104
+
105
- $(drawTrg).css({backgroundColor: color});
105
+ $(drawTrg).css({backgroundColor: color});
106
+
107
+ }
106
108
 
107
109
  });
108
110
 
109
- });
110
-
111
111
  ```
112
112
 
113
- - `$('.body_' + i+',.sleeve_' + i)`に対して`touchmove`イベント（両方のパターンを一つのコードで）
113
+ - `$('.dottlanslate td')`に対して`touchmove`イベント（両方のパターンを一つのコードで。$.each(function)も変数iも無くせます）
114
114
 
115
115
  - `event.originalEvent.touches[0]`で現在座標を取得し
116
116
 
117
117
  - `document.elementFromPoint(touch.clientX, touch.clientY)`で現在座標にある要素を取得→変数targetへ代入
118
+
119
+ - targetの存在確認で以後の処理を分岐（tableから外へ出たり等targetが取得できないことがあるので）
120
+
121
+
122
+
123
+ 以後、targetが存在すれば
124
+
125
+
118
126
 
119
127
  - target要素のclassを取得し、塗りを適用する要素を、変数drawTrgへ
120
128
 
@@ -124,7 +132,11 @@
124
132
 
125
133
 
126
134
 
127
- という流れですね。
135
+ という流れです。
136
+
137
+ 結構回りくどい処理になってしまいましたね…。
138
+
139
+
128
140
 
129
141
 
130
142
 

2

修正

2016/05/07 16:04

投稿

manabufukai
manabufukai

スコア700

test CHANGED
@@ -98,7 +98,7 @@
98
98
 
99
99
  var drawTrg = $(target).hasClass('dot') ? '.'+cn[1] : '.'+cn[0];
100
100
 
101
- if(!target || drawTrg === '.doteditor') return; //ちょっとここが無理やりかもです…
101
+ if( !drawTrg.match(/body_|sleeve_/) ) return;
102
102
 
103
103
  $(drawTrg).text(text);
104
104
 
@@ -119,8 +119,6 @@
119
119
  - target要素のclassを取得し、塗りを適用する要素を、変数drawTrgへ
120
120
 
121
121
  - document.elementFromPoint()で要素を取得しているので、塗りを適用させたくない要素も取得してしまう。→'.body_'or'.sleeve_'で始まるクラスでなければreturnで処理を行わない。
122
-
123
- （match()等を使うほうが本当は良いでしょうが、処理が重くなりそうだったので、こんな感じにしてみました）
124
122
 
125
123
  - drawTrgに代入された要素へcssを適用
126
124
 

1

コード修正

2016/05/07 13:52

投稿

manabufukai
manabufukai

スコア700

test CHANGED
@@ -78,33 +78,51 @@
78
78
 
79
79
 
80
80
 
81
- まとめつつ、自分だったらこうするかな？というコードも書かせていただきます。
81
+ まとめつつ、自分だったらこうするかな？というコードも書かせていただきます。（※修正しました）
82
82
 
83
83
  ```
84
84
 
85
+ $('td').each(function (i) {
86
+
87
+ i = i+1;
88
+
85
- $('.dot').on('touchmove', function(event) {
89
+ $('.body_' + i+',.sleeve_' + i).on('touchmove', function(event) {
86
90
 
87
91
  event.preventDefault();
88
92
 
89
93
  var touch = event.originalEvent.touches[0];
90
94
 
91
- var target = $(document.elementFromPoint(touch.clientX, touch.clientY));
95
+ var target = document.elementFromPoint(touch.clientX, touch.clientY);
92
96
 
93
- if (target.hasClass('dot')) target.text(text);
97
+ var cn = target.classList; // （IE10＋）
94
98
 
95
- if (target.hasClass('dot')) target.css({backgroundColor: color});
99
+ var drawTrg = $(target).hasClass('dot') ? '.'+cn[1] : '.'+cn[0];
100
+
101
+ if(!target || drawTrg === '.doteditor') return; //ちょっとここが無理やりかもです…
102
+
103
+ $(drawTrg).text(text);
104
+
105
+ $(drawTrg).css({backgroundColor: color});
96
106
 
97
107
  });
98
108
 
109
+ });
110
+
99
111
  ```
100
112
 
101
- - `$('.dot')`に対して`touchmove`イベント（$.each(function)も引数iもいらない）
113
+ - `$('.body_' + i+',.sleeve_' + i)`に対して`touchmove`イベント（両方のパターンを一つのコードで）
102
114
 
103
115
  - `event.originalEvent.touches[0]`で現在座標を取得し
104
116
 
105
117
  - `document.elementFromPoint(touch.clientX, touch.clientY)`で現在座標にある要素を取得→変数targetへ代入
106
118
 
119
+ - target要素のclassを取得し、塗りを適用する要素を、変数drawTrgへ
120
+
121
+ - document.elementFromPoint()で要素を取得しているので、塗りを適用させたくない要素も取得してしまう。→'.body_'or'.sleeve_'で始まるクラスでなければreturnで処理を行わない。
122
+
123
+ （match()等を使うほうが本当は良いでしょうが、処理が重くなりそうだったので、こんな感じにしてみました）
124
+
107
- - targetに代入された要素へcssを適用
125
+ - drawTrgに代入された要素へcssを適用
108
126
 
109
127
 
110
128