Javascript 如何向图像添加 .click() 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7374562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a .click() event to an image?
提问by SS'
I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
感谢Jose Faeti，我有一个基于鼠标点击放置图像的脚本。现在我需要帮助将 .click() 事件添加到下面的代码中，以便在用户单击图像时执行脚本中显示的功能。
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
I put the entire code below, in case you want to see it.
我把整个代码放在下面，以防你想看。
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
// -->
</script>
</head>
<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>
Help?
帮助？
回答by mpen
First of all, this line
首先，这条线
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
You're mixing HTML and JavaScript. It doesn't work like that. Get rid of the .click()there.
您正在混合 HTML 和 JavaScript。它不是那样工作的。摆脱.click()那里。
If you read the JavaScript you've got there, document.getElementById('foo')it's looking for an HTML element with an ID of foo. You don't have one. Give your image that ID:
如果您阅读了那里的 JavaScript，document.getElementById('foo')它会查找 ID 为 .js 的 HTML 元素foo。你没有。为您的图片提供该 ID：
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
或者，您可以将 JS 放入一个函数中，然后在您的 HTML 中放置一个 onclick：
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
I suggest you do some reading up on JavaScript and HTML though.
不过，我建议您阅读一些 JavaScript 和 HTML。
The others are right about needing to move the <img>above the JS click binding too.
其他人也需要将<img>上面的 JS 单击绑定移动到正确的位置。
回答by Guffa
You can't bind an event to the element before it exists, so you should do it in the onloadevent:
您不能在元素存在之前将事件绑定到元素，因此您应该在onload事件中执行此操作：
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
};
</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
回答by Arun
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var img = document.createElement('img');
img.setAttribute('src', 'tiger.jpg');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
</body>
</html>
回答by Muhammad Bilal
Enclose <img>in <a>tag.
附上<img>的<a>标签。
<a href="http://www.google.com.pk"><img src="smiley.gif"></a>
it will open link on same tab, and if you want to open link on new tab then use target="_blank"
它将在同一选项卡上打开链接，如果您想在新选项卡上打开链接，请使用 target="_blank"
<a href="http://www.google.com.pk" target="_blank"><img src="smiley.gif"></a>
