Javascript 如何将.click（）事件添加到图像？_Javascript_Events_Mouseevent

Javascript 如何将.click（）事件添加到图像？

javascript events

Javascript 如何将.click（）事件添加到图像？,javascript,events,mouseevent,Javascript,Events,Mouseevent,我有一个脚本，放置一个基于鼠标点击的图像感谢。现在我需要帮助在下面的代码中添加一个.click（）事件，以便用户单击图像时执行脚本中显示的功能 <img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click() 。单击（）我把整个代码放在下面，以防你想看 <html> <head> <script language="javascr

我有一个脚本，放置一个基于鼠标点击的图像感谢。现在我需要帮助在下面的代码中添加一个.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>


。单击（）

帮助？

首先，这一行

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

或者，您可以在函数中插入JS，并在HTML中插入onclick：

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

不过，我建议您阅读一下JavaScript和HTML

其他人认为需要将

移动到JS click binding上方也是正确的。

您不能在事件存在之前将其绑定到元素，因此您应该在

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>


window.onload=函数（）{
document.getElementById（'foo'）。addEventListener（'click'，函数（e）{
var img=document.createElement（'img'）；
img.setAttribute（'src'，'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e、 目标儿童（img）；
});
};


函数openOnImageClick（）
{
//警报（“Jai-Sh-Raam”）；
//document.getElementById（“images”）.src=“fruits.jpg”；
var img=document.createElement（'img'）；
setAttribute（'src'，'tiger.jpg'）；
img.setAttribute（'width'，'200'）；
img.setAttribute（'height'，'150'）；
document.getElementById（“图像”）.appendChild（img）；
}
屏幕截图视图
单击老虎以显示图像

将

括在

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

您不只是使用jQuery的原因是什么？在任何情况下，您都在为图像创建一个DOM元素——向其中添加侦听器与向任何其他DOM元素添加侦听器是一样的——这是您已经知道的。

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

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

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

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