2015年2月7日土曜日

JavaScript: <input type="image"> で座標を送る

<form> 内の <input type="image"> は画像をクリックした時の、
マウスカーソルの座標(画像の左上の 0,0 とする相対座標)も送信する。

jQuery でお手軽にクリックイベントを実行すると、
座標として x = 0, y = 0 が送られる。

JavaScript による自動クリックの対策として、
<input type="image"> のクリック時の座標がセットされていることや、
(0, 0)以外の座標でなければリクエストを拒否するサイトも存在する。

JavaScript から座標をそれっぽく送りたい場合は、
createEvent() と initMouseEvent() で
座標を指定したマウスクリックイベントを作成・実行すれば良い。
// 検索ボタン(をクリックする場合)
var searchButton = document.querySelector('input[name=search]');
var event = document.createEvent('MouseEvents');
event.initMouseEvent(
 'click',
 true,
 true,
 window,
 0,
 0,
 0,
 $(searchButton).position().left + 15,  // X = 15
 $(searchButton).position().top + 15,  // Y = 15
 false,
 false,
 false,
 false,
 0,
 null
);
searchButton.dispatchEvent(event);


参考
<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった | それマグで!
http://takuya-1st.hatenablog.jp/entry/2014/12/05/145944

0 件のコメント:

コメントを投稿