用戶將能夠點擊圖像上的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

相關問題