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

Question

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

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

ありがとうございました

2

追加された 06 2月 2012 〜で 01:17 著者 maddogandnoriko 編集された 06 2月 2012 〜で 01:20

ビュー: 4

源

ru fr es pt de ar

4 答え

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

追加された 06 2月 2012 〜で 01:30 著者 Frédéric Hamidi

源

私はそれが簡単だとは信じられません。ただ素晴らしい。ありがとうございました。

追加された 06 2月 2012 〜で 01:43, 著者 maddogandnoriko, 源

エレガントなソリューション！セルの中央をクリックすると、どうすれば検出できますか？

追加された 23 4月 2015 〜で 03:11, 著者 Cory, 源

@Cory、もしあなたが e.pageX - $ this.offset（）。left == $ this.width（）/ 2 ならテストすることができます。しかし、これはユーザビリティの悪夢のように見えます。ユーザーからピクセル完全なクリックを要求することは、通常、良い考えではありません。

追加された 23 4月 2015 〜で 03:13, 著者 Frédéric Hamidi, 源

著者 karim79 · Answer 1 · 2012-02-06T01:24Z

マウスポインタの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");   
    }
});

デモ。

著者 Yorgo · Answer 2 · 2012-02-06T01:26Z

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

（ウィンドウの）マウスの位置を見つける
クリックされたセルに関連するマウスの位置を見つける

著者 adarshr · Answer 3 · 2012-02-06T01:23Z

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