在图像上放置点 - onClick [英] Placing a dot on an image - onClick
问题描述
用户可以点击图片上的3个点，我想在这些点上显示一个黑点。然后我会将这些值保存在我的数据库中，然后用这3个点重新生成图像。
这是一个2部分的问题：
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高度'，大小）
.css（'background-color'，color））;
}）;
}）;
HTML
< body background =http://www.craigjoneswildlifephotography.co.uk/blog/wp-content/uploads/2010/07/CMJ57311.jpg>
< / body>
2。）说我有点的X和Y坐标，
只要使用
文档而不是 code> body （您的body元素的计算高度为0，但文档总是窗口的完整大小）：
http://jsfiddle.net/TrueBlueAussie/ 95vczfve / 5 /
$（document）.ready（function（）{
$ ）.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元素可以被定义为不存在（在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/
A user will be able to click on 3 points on an image, and i want to display a BLACK dot at those points. Then i will save these values in my database, and regenerate the image with those 3 points later on.
This is a 2 part question:
1.) In my code, i am not able to detect the onClick event when the image is clicked. Can someone look into this. Here's my code. 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.) Say that i have the X and Y coordinates of the points, and how can i regenerate the image with those points ?
解决方案Just use
documentinstead ofbody(yourbodyelement has a calculated height of 0, but document is always the full size of the window):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)); }); });As a side note: Your original JSFiddle is also a great example of why you should not connect delegated events to
bodyinstead ofdocument. Thebodyelement can be styled out of existence (alsodocumentexists before the DOM is even loaded) :)Or, as Brian provided, a reduced version 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' }) ); }); });And Brian's final update with limit of 3 dots: http://jsfiddle.net/BrianDillingham/95vczfve/8/
这篇关于在图像上放置点 - onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
