如何使用JS中的onclick（）函數放置圖像
[英]How can I place an image with the onclick() function from JS
問題描述
所以我想我知道該怎么做。 調用onclick()函數時，我需要獲取光標的坐標。 問題是，我不確定單擊時如何創建新圖像。 很抱歉沒有顯示我的嘗試。 它們存在，但基本上什么也沒做。 有誰知道如何做到這一點？ 謝謝。
編輯：請注意，圖像不能在那里開始。 它們必須在單擊時創建。
3 個解決方案
解決方案1
0 2018-06-30 19:38:54
使用CSS設置默認值以隱藏image屬性，並使用click函數更改CSS以顯示而不是隱藏。
解決方案2
0 2018-06-30 19:55:52
<body style="position: relative">
<script>
var img = null;
function placeImage(e) {
if(img == null){
img = document.createElement("IMG");
img.setAttribute("src", "img.png");
img.setAttribute("width", "40");
img.setAttribute("height", "40");
img.style.position = "absolute";
document.body.appendChild(img);
}
img.style.left = (e.clientX - (img.width / 2)) + "px";
img.style.top = (e.clientY - (img.height / 2)) + "px";
}
document.addEventListener("click", placeImage);
</script>
</body>
這會將圖像的中心放置在您單擊的位置。
編輯：我更改了代碼以將圖像創建為DOM對象
解決方案3
0 已采納 2018-06-30 20:10:02
基於@AyoubLaazazi的答案，請嘗試以下操作：
img = document.getElementById("img") counter = 0 function placeImage(e) { imgc = $("#img").clone().appendTo("body")[0] imgc.style.visibility = "visible" imgc.style.left = (e.clientX - (img.width / 2)) + "px"; imgc.style.top = (e.clientY - (img.height / 2)) + "px"; counter++ } document.addEventListener("click", placeImage)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/8007/large/1441565237/stack-overflow-logo.png" style="visibility: hidden; position: absolute" id="img"/> </body>
如何從 html onclick 中的 javascript 模塊調用函數
[英]How can I call a function from javascript module in html onclick
onClick function 在渲染時被調用——我怎樣才能阻止這種情況的發生？
[英]onClick function is called on render -- how can I stop this from occurring?
如何在Meteor / React中通過onClick將變量傳遞給函數？
[英]How can I pass variables to function from onClick in Meteor/React?
Javascript的object.onClick運行函數而不是設置onClick，如何防止這種情況發生，僅執行onClick函數？
[英]Javascript's object.onClick runs the function instead of setting onClick, how can I prevent that from happening and only execute the function onClick?
如何在一個javaScript onClick事件中檢索畫布圖像並在函數中使用該圖像？
[英]How can I retrieve a canvas image and use that image in a function all within one javaScript onClick event?
如何在錨點標記中以編程方式調用onclick（）事件，同時在onclick函數中保留“this”引用？
[英]How can I programmatically invoke an onclick() event from a anchor tag while keeping the ‘this’ reference in the onclick function?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何在反應 js 中正確使用 Onclick 和 function？
如何將圖像添加到 JS 函數？
如何從 html onclick 中的 javascript 模塊調用函數
onClick function 在渲染時被調用——我怎樣才能阻止這種情況的發生？
如何在Meteor / React中通過onClick將變量傳遞給函數？
如何從 onclick 將元素傳遞給函數？
我如何在圖片地圖上onclick提交功能
Javascript的object.onClick運行函數而不是設置onClick，如何防止這種情況發生，僅執行onClick函數？
如何在一個javaScript onClick事件中檢索畫布圖像並在函數中使用該圖像？
如何在錨點標記中以編程方式調用onclick（）事件，同時在onclick函數中保留“this”引用？
相關標簽