Question

由于Jose Faeti，我有一个基于鼠标点击放置图像的脚本。现在我需要帮助将.click（）事件添加到下面的代码中，以便当用户单击图像时它执行脚本中显示的功能。

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

我把整个代码放在下面，以防你想看到它。

<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>

帮助？

Answer 1

首先，这一行

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

您正在混合使用HTML和JavaScript。它不像那样工作。摆脱那里的.click()。

如果你阅读了那里的JavaScript，document.getElementById('foo')它正在寻找ID为foo的HTML元素。你没有。为您的图片提供ID：

<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />

或者，您可以将JS放入函数中并在HTML中添加onclick：

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />

我建议您阅读一些关于JavaScript和HTML的内容。

其他人对于需要将<img>移到JS点击绑定之上是正确的。

Answer 2

您不能在事件存在之前将事件绑定到该元素，因此您应该在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>

Answer 3

<!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>

Answer 4

将<img>括在<a>标记中。

<a href="http://www.google.com.pk"><img src="smiley.gif"></a>

它将在同一选项卡上打开链接，如果要在新选项卡上打开链接，请使用target =“ _ blank”

<a href="http://www.google.com.pk" target="_blank"><img src="smiley.gif"></a>

如何向图像添加.click（）事件？

4 个答案: