创建一个图像，无论哪里有人点击 - .append结合pageX和Pagey

Question

我想创建一个智能手机（iOS和Android）上的交互，创建一个图像，无论有人在屏幕上点击。使用jQuery Mobile的，这是JS我现在所拥有的：

$('#container1').bind('tap', function(e) { 
$('img').css({ 
    position: 'absolute', 
    left: e.pageX, 
    top: e.pageY 
}); 
$("#container1").append('<img src="image.png" />'); 
}); 

然而，这造成了图像的情况下，保持堆叠它们无论用户在哪里水龙头。如果有人用独特的X和Y位置进行点击，我该如何组合这两个代码块来创建同一图像的独特实例？谢谢！

Answer 1

您的代码

$('img').css({ 
    position: 'absolute', 
    left: e.pageX, 
    top: e.pageY 
}); 

正在改变页面上的所有img标签的位置。您可能需要手动设置您添加的图片样式属性：

$('#container1').bind('tap', function(e) { 
    var image = '<img src="image.png" style="position:absolute;left:' + e.pageX + 
     ';top:' + e.pageY';" />'; 
    $("#container1").append(image); 
}