用户将能够点击图像上的3个点，并且我想在这些点上显示一个黑点。然后我将这些值保存在我的数据库中，并在之后的3分中重新生成图像。在图像上放置一个点 - onClick

这是一个两部分的问题：

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坐标，我怎么能再生与这些点的形象呢？

来源

2014-09-30 Illep

“_how我可以重新生成image_”。你真的想生成一个图像，或只是重新创建那些黑色的div？ – blex 2014-09-30 14:40:16

你为什么要链接'css（）'而不是使用'css（{top：，left：}）' - 它更干净并且性能更好http://jsfiddle.net/BrianDillingham/95vczfve/7/ – 2014-09-30 14:41:37

只是一个供参考，我只是提出了更多的更新，我的答案和[jsFiddle]（http://jsfiddle.net/SpYk3/62hnurzd/） – SpYk3HH 2014-09-30 14:59:14

只需使用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元素可样式不存在了（也document存在甚至加载DOM前）:)

或者，正如布赖恩提供一个简化版本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' 
      })    
     );    
    }); 

});

布莱恩与极限最后更新3点：http://jsfiddle.net/BrianDillingham/95vczfve/8/

来源

2014-09-30 14:40:15

同意！好的一面说明！ – SpYk3HH 2014-09-30 14:43:35

只有概率我看到寿，与0身高，所有的divs要去同一个地方 – SpYk3HH 2014-09-30 14:48:21

这里是非链式的CSS，如果你想添加到你的答案http://jsfiddle.net/BrianDillingham/95vczfve/7/ – 2014-09-30 14:48:24

身体有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 
       }) 
     ); 
    }) 
});

来源

2014-09-30 14:38:22 SpYk3HH

哟意味着什么。你可以让我看看JSfiddle吗？ – Illep 2014-09-30 14:48:21

@Illep用新的jsFiddle链接更新了答案，看一看！ – SpYk3HH 2014-09-30 14:52:16

关于你的问题的第二部分，我首先想到的是包括在图像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取决于您正在做什么。

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

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

来源

2014-09-30 14:48:47

在图像上放置一个点 - onClick

回答

jsFiddle

相关问题