在图像上放置一个点 – 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( $('') .css('position', 'absolute') .css('top', mouseY + 'px') .css('left', mouseX + 'px') .css('width', size) .css('height', size) .css('background-color', color)); }); }); HTML
2.）假设我有点的X和Y坐标，我怎样才能用这些点重新生成图像？
只需使用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( $('') .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( $('').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/
你的身体有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 $('') // 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 }) ); }) });
关于你问题的第2部分，我的第一个想法是在图像URL中包含查询参数，这样就可以得到类似http://www.example.com/thingies/someimage.jpg?x0=10&y0=25&x1=30&y1=5的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中。