画像に.click（）イベントを追加するにはどうすればよいですか？

Jose Faetiのおかげでマウスクリックに基づいて画像を配置するスクリプトがあります。これで、ユーザーが画像をクリックしたときにスクリプトに表示されている関数が実行されるように、以下のコードに.click（）イベントを追加する手助けが必要になりました。画像に.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>

ヘルプ？すべての

出典

2011-09-10 SS'

あなただけのjQueryを使用していない任意の理由は？いずれにしても、画像のDOM要素を作成しています。リスナーを追加することは、ほかのDOM要素にリスナーを追加することと同じです。既にやり方を知っています。 –

まず、あなたがHTMLとJavaScriptを混合している。このライン

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

。それはそのようには機能しません。そこに.click()を取り除く。

あなたが持っているJavaScriptを読むと、document.getElementById('foo')というIDのfooのHTML要素があります。あなたはそれを持っていません。私はあなたには、いくつかのJavaScriptとHTMLかかわら上に読んでください示唆

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

：また

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

、あなたが関数内でJSを投げると、あなたのHTMLにonclickのを置くことができます：IDというイメージを与えます。

他は、JSクリックバインディングの上にも<img>を移動する必要があることについては正しいです。

出典

2011-09-10 20:49:35 mpen

それが存在する前に、要素にイベントをバインドすることはできませんので、あなたは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>

出典

2011-09-10 20:50:00 Guffa

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

出典

2014-02-15 12:34:29 Arun

画像に.click（）イベントを追加するにはどうすればよいですか？

答えて

関連する問題