セルのどの面がクリックされたか

私は、複数の行、たとえば50、複数の列、つまり50の両方が20pxの正方形であるテーブル 'グリッド'を持っています。ユーザーはクリックしてセルのbg色を変更することができます。これは関連性があります。なぜなら、テーブルに留まる必要があるからです。グリッドに沿って線を描くようにしたいと思います。セルのどの辺をクリックしたのか、それとも最も近いものをクリックしたのかを検出することは可能でしょうか?だから私はxピクセルにその境界線を設定できますか?

ありがとうございました

2

4 答え

マウスポインタのx座標とy座標をキャプチャし、簡単な数学を行うのは簡単なことです。例えば。:

$("td").mousemove(function(e) {
    var xpos = e.pageX;
    var ypos = e.pageY;
    console.log(xpos + " " + ypos);
    if(xpos < $(this).width()/2) {
        console.log("somewhere left");    
    } else {
        console.log("somewhere right");   
    }
});

デモ。

5
追加された
素晴らしい...私のページに適用するためのちょっとした数学です。ありがとうございました!
追加された 著者 maddogandnoriko,
@フレデリックハミディ - 良い点:S
追加された 著者 karim79,
event.pageX event.pageY はドキュメント相対です。意味のある結果を得るためにコードを要素相対座標に変換する必要があります。
追加された 著者 Frédéric Hamidi,

pageX pageY プロパティを参照してください。

そこから要素の相対座標を取得するために要素の offset()を引くことができます。次に、結果の水平座標を要素の width()の半分と比較するだけです。

$("td").click(function(e) {
    var $this = $(this);
    if (e.pageX - $this.offset().left > $this.width()/2) {
       //Clicked on the right side.
    } else {
       //Clicked on the left side.
    }
});
4
追加された
私はそれが簡単だとは信じられません。ただ素晴らしい。ありがとうございました。
追加された 著者 maddogandnoriko,
エレガントなソリューション!セルの中央をクリックすると、どうすれば検出できますか?
追加された 著者 Cory,
@Cory、もしあなたが e.pageX - $ this.offset()。left == $ this.width()/ 2 ならテストすることができます。しかし、これはユーザビリティの悪夢のように見えます。ユーザーからピクセル完全なクリックを要求することは、通常、良い考えではありません。
追加された 著者 Frédéric Hamidi,

あなたはこれを次のように解決することができます:

  1. (ウィンドウの)マウスの位置を見つける
  2. クリックされたセルに関連するマウスの位置を見つける
0
追加された

こちらをご覧ください。この例は絶対座標を提供します。あなたは、どのセルのどの領域がクリックされたかを決定するためにいくつかの計算を行うことによって、あなたのケースに適応する必要があります。

0
追加された