Ill*_*lep 6 html javascript css jquery
用户可以点击图像上的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('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坐标,我怎样才能用这些点重新生成图像？
你的身体有 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
})
);
})
});
只需使用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是偶数加载):)
或者,正如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/