jsFiddle

Question

用户可以点击图像上的3个点，我想在这些点上显示黑点。然后我将这些值保存在我的数据库中，稍后用这3点重新生成图像。

这是一个由两部分组成的问题：

1。）在我的代码中，单击图像时无法检测到onClick事件。有人可以调查这个。这是我的代码。 JSFIDDLE

  $(document).ready(function () {
      $('body').click(function (ev) {
          alert("d");
          mouseX = ev.pageX;
          mouseY = ev.pageY
          alert(mouseX + ' ' + mouseY);
          var color = '#000000';
          var size = '1px';
          $("body").append(
          $('<div></div>')
              .css('position', 'absolute')
              .css('top', mouseY + 'px')
              .css('left', mouseX + 'px')
              .css('width', size)
              .css('height', size)
              .css('background-color', color));
      });
  });

HTML

<body background="http://www.craigjoneswildlifephotography.co.uk/blog/wp-content/uploads/2010/07/CMJ57311.jpg">

</body>

2。）假设我有点的X和Y坐标，我怎样才能用这些点重新生成图像？

Answer 1

只需使用document代替body（您的body元素的计算高度为0，但文档始终是窗口的完整大小）：

http://jsfiddle.net/TrueBlueAussie/95vczfve/5/

  $(document).ready(function () {
      $(document).click(function (ev) {
          mouseX = ev.pageX;
          mouseY = ev.pageY
          console.log(mouseX + ' ' + mouseY);
          var color = '#000000';
          var size = '1px';
          $("body").append(
          $('<div></div>')
              .css('position', 'absolute')
              .css('top', mouseY + 'px')
              .css('left', mouseX + 'px')
              .css('width', size)
              .css('height', size)
              .css('background-color', color));
      });
  });

作为旁注：您原来的JSFiddle也是一个很好的例子，说明为什么不应该将委派的事件连接到body而不是document。 body元素的样式可以不存在（在加载DOM之前也存在document）：）

或者，正如Brian所提供的，缩小版http://jsfiddle.net/BrianDillingham/95vczfve/7/：

$(document).ready(function(){ 

    $(document).click(function (ev) {        
        $("body").append(            
            $('<div></div>').css({
                position: 'absolute',
                top: ev.pageY + 'px',
                left: ev.pageX + 'px',
                width: '10px',
                height: '10px',
                background: '#000000'
            })              
        );               
    });

});

Brian的最终更新限制为3点：http://jsfiddle.net/BrianDillingham/95vczfve/8/

Answer 2

你的身体有0高，因为它有0个内容。

尝试将此添加到您的CSS：

html, body { height: 100%; margin: 0; }

或尝试添加一些内容。

jsFiddle

在侧面提示中，有关jQuery的许多内容可以变得更清晰/更容易：

$(document).ready(function(){
    //  here I asign the event dynamically, not needed for 'body' as such tag should always be present,
    //  but something you should look into
    //  see also: http://api.jquery.com/on/
    $(document).on('click', 'body', function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY
        //  simply press F12 to look at your browsers console and see the results
        console.log('Mouse Position:\t' + mouseX + '|' + mouseY);
        //  no need in JS to write var for every variable declartion,
        //  just seperate with a comma
        var color = '#000000',
            size = '5px';   //  changed size to 5px from 1 just to make it easier to see what's going on for you
        //  No need to use $("body") since this event takes place on the body tag
        //  $(this), in an event, always equals the selector the event is tied to
        $(this).append(
            //  making an element with jquery is simple
            //  no need to insert whole tag, all you need is tag name and a closer
            //  like so
            $('<div />')
                //  easily tie all css together
                .css({
                    //  also, in jquery CSS, any css variable with a '-' 
                    //  can be renamed when assigning
                    //  simply remove the '-' and capitilize the first letter of the second word
                    //  like so, here in 'background-color'
                    backgroundColor: color,
                    height: size,
                    left: mouseX + 'px',
                    position: 'absolute',
                    top: mouseY + 'px',
                    width: size
                })
        );
    })
});

Answer 3

关于问题的第2部分，我首先想到的是在图片网址中加入查询参数，以便http://www.example.com/thingies/someimage.jpg取代http://www.example.com/thingies/someimage.jpg?x0=10&y0=25&x1=30&y1=5而不是x0。从那里，您只需检查该字符串是否包含名称与您要查找的名称相匹配的查询参数（y0，x1，{{1}}等...）并根据那些。

或者，您也可以将参数存储在该网页的网址中，但这可能会导致网址噪音，具体取决于您正在做什么。

这取决于存储坐标的服务器。

我的第二个想法是Local Storage，会将这些点存储在客户端，但这意味着这些点不一定会发送到服务器，而是只能从客户端的浏览器中读取。它还取决于支持它的浏览器，并允许它。当然，由于3坐标是一组相当小的数据，因此它可以存储在浏览器cookie中。

在图像上放置一个点 - onClick

3 个答案:

jsFiddle