检测鼠标在图像上的点击并将其存储在数据库中

Question

我想检测鼠标在图像上的点击并将所有点击点存储在数据库文件中。我试过了，但我只能检索最后一次点击，而不是会话中的所有点击。我的鼠标点击代码是这样的：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script>
      $(document).ready(function() 
      {
        $('img').click(function(f) 
        {
          var offset = $(this).offset();
          var X = (f.pageX-offset.left);
          var Y = (f.pageY-offset.top);
          var X1=[X];
          var Y1=[Y];
          $('#display').text('X: ' + X1 + ', Y: ' + Y1);
        });
      });
   </script>
  </head>
  <body>
    <img style="width:500px;"src="mouseclick.png"/>   
    <div id="display">
    </div>
  </body>
</html>

Answer 1

通过这样做，您可以保存每次 ajax 调用的所有点击。

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    var xPoint = e.pageX - offset.left;
    var yPoint = e.pageY - offset.top;
    alert(e.pageX - offset.left);
    alert(e.pageY - offset.top);
    $.ajax({
      url: "where you want to go example: /Admin/SavePoints",
      type:"POST",
      data:{xAxis:xPoint,yAxis:yPoint },
      success: function(data){
       alert("Saved");   
      }
      error: function(){
        alert("ERROR");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

已更新Fiddle：

$(document).ready(function() {
    var arrayOfXY = new Array();
    $('img').click(function(e) {
        var offset = $(this).offset();
        var xPoint = e.pageX - offset.left;
        var yPoint = e.pageY - offset.top;
        arrayOfXY.push({x:xPoint, y:yPoint});
    });
  
    $(".showCoordinates").on("click",function() {
        for (var i = 0; i < arrayOfXY.length; i++) {
            var x = arrayOfXY[i].x;
            var y = arrayOfXY[i].y;
            alert("x axis:"+x+" and y axis:"+y);
            console.log("x axis:"+x+" and y axis:"+y);
        }
    });
  
    $(".saveCoordinates").on("click",function() {
        $.ajax({
            url: "Ur url",
            type:"POST",
            data: {coordinates:arrayOfXY},
            success:function(data){
              alert("Success");
            },
            error: function(){
              alert("ERROR");
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
<button class="showCoordinates">Show saved coordinates</button>
<button class="saveCoordinates">Save coordinates in DB</button>

检测鼠标在图像上的点击并将其存储在数据库中

Detect mouse clicks on image and store them in a database

database

jquery

mouseclick-event