Javascript 在图像上放置点-单击

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

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

1.）在我的代码中，我无法在单击图像时检测到onClick事件。有人能调查一下吗。这是我的密码

$（文档）.ready（函数（）{
$（'body'）。单击（函数（ev）{
警报（“d”）；
mouseX=ev.pageX；
mouseY=ev.pageY
警报（mouseX+“”+mouseY）；
var color='#000000'；
变量大小='1px'；
$（“正文”）。附加(
$('')
.css（'位置'，'绝对'）
.css（'top'，mouseY+'px'）
.css（'left'，mouseX+'px'）
.css（'width'，size）
.css（'高度'、大小）
.css（'背景色'，颜色））；
});
});

HTML

---

2.）假设我有点的X和Y坐标，如何用这些点重新生成图像？

你的身体高度为0，因为它的内容为0

尝试将此添加到CSS中：

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

或者尝试添加一些内容

---

另一方面，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
                })
        );
    })
});

$（文档）.ready（函数（）{
//在这里，我动态地分配事件，“body”不需要，因为这样的标记应该始终存在，
//但有些事你应该调查一下
//另见：http://api.jquery.com/on/
$（文档）。在（'click'，'body'，函数（e）上{
mouseX=e.pageX；
mouseY=e.pageY
//只需按F12键即可查看浏览器控制台并查看结果
log（'鼠标位置：\t'+mouseX+'|'+mouseY）；
//无需在JS中为每个变量声明编写var，
//用逗号隔开
var color='#000000'，
size='5px'；//将size从1更改为5px，以便更容易地看到发生了什么
//无需使用$（“body”），因为此事件发生在body标记上
//$（此值）在事件中始终等于该事件绑定到的选择器
$（此）。附加(
//使用jquery生成元素很简单
//不需要插入整个标签，您只需要标签名和一个闭合器
//像这样
$('')
//轻松地将所有css绑定在一起
.css({
//另外，在jQueryCSS中，任何带有“-”的CSS变量
//可以在分配时重命名
//只需删除“-”，并将第二个单词的第一个字母大写
//就像这样，这里是“背景色”
背景颜色：颜色，
高度：尺寸，
左：mouseX+‘px’，
位置：'绝对'，
顶部：鼠标+‘px’，
宽度：尺寸
})
);
})
});

只需使用

document

而不是

body

（您的

body

元素的计算高度为0，但document始终是窗口的完整大小）：

---

Brian的最后一次更新限制为3点：

关于你问题的第2部分，我的第一个想法是在图像URL中包含查询参数，而不是

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

，等等），并根据这些参数放置点

或者，您也可以将参数存储在该网页的URL中，但这可能会导致嘈杂的URL，具体取决于您正在执行的操作

不过，这取决于存储坐标的服务器

---

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

“如何重新生成图像”。你真的想生成一个图像，还是只是在上面重新创建那些黑色div？为什么你要链接

css（）

而不是使用

css（{top:，left:}）

-它更干净，性能更好仅供参考，我只是对我的答案和我看到的唯一问题做了更多更新，身高为0，所有的div都将放在同一个地方这里是非链接css如果你想把它添加到你的答案中，我更喜欢点击文档，因为它更有意义。哦，好吧，这是一个包含3个限制的版本，我怎么能附加一个圆而不是一个rec？你是什么意思？你能在JSFIDLE中给我看一下吗？

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

$(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
                })
        );
    })
});

  $(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));
      });
  });

$(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'
            })              
        );               
    });

});