13

div要素の左半分または右半分でマウスクリックが発生したかどうかを計算できるかどうか疑問に思っていました:

$("div").click(function(e){
 // calculate if click happened on left or right half
});


<div>Variable Content</div>

相対座標を取得し、それらを div の幅に関連付ける方法があることを望んでいましたか?

4

7 に答える 7

22 
$("div").click(function(e){
   var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders
   var pOffset = $(this).offset(); 
   var x = e.pageX - pOffset.left;
    if(pWidth/2 > x)
        $(this).text('left');
    else
        $(this).text('right');
});

デモ: http://jsfiddle.net/dirtyd77/QRKn7/1/

お役に立てれば！ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-03-28T15:32:55.073 に答える
3

これはそれを行う必要があります：

$("div").click(function(e){
    var $div = $(this);
    alert(e.pageX >= ($div.offset().left + $div.width()/2) ? 'clicked right' : 'clicked left');
});
于 2013-03-28T15:32:09.450 に答える
3 
var x = evt.pageX - $(this).offset().left

if (x > $(this).width()/2) {
  //Right half
} else {
  //Left half
}

So the full code would be

$("div").click(function(e){
   // calculate if click happened on left or right half
  var x = evt.pageX - $(this).offset().left

  if (x > $(this).width()/2) {
    //Right half
  } else {
    //Left half
  }
});
于 2013-03-28T15:32:37.220 に答える
2

To get the position of mouse within, you can calculate the difference between the mouse position and the div offset. Then compare it with the half width of the div itself and voilà.

EDIT

$(function ()
{

    $("#test").click(function(e){
       var offset = $(this).offset(); 
       var pos_x = e.pageX - offset.left;
       var middle = $(this).outerWidth() / 2;

       if(pos_x < middle)
       {
           alert('left part');
       }
       else
       {
             alert('right part');
       }
    });

});

You can check it out here:

http://jsfiddle.net/kZuML/

于 2013-03-28T15:32:29.850 に答える
1

あなたが知っているのでフィドル- YOLO!

$("#special").on('click', function(e){

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop; //You probably don't need Y. Unless you want to know height as well.

    var width = $(this).width(),
        where = width / 2;
    if( x > where ){
        console.log("Click was on the right");
    } else {
        console.log("Click was on the left");
    }
});
于 2013-03-28T15:39:14.447 に答える
1

PURE JAVASCRIPT ソリューション - パーティーに遅れて参加する。しかし、最近私のコードを使用してこれを行いました。body タグまたは div で ID を指定し、javascript 関数を呼び出します。id="tt" onclick="showCoords(イベント)"

 function showCoords(event) {
        var x = event.clientX;
        var y = event.clientY;
    //    var coor = "X coords: " + x + ", Y coords: " + y;
    //    document.getElementById("demo").innerHTML = coor;
        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
            alert('right click');

        }
        else
       {
           alert('left click');

        }


    }
于 2015-06-11T21:40:40.070 に答える