이미지에 .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과 자바 스크립트를 혼합하고이 라인

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

. 그것은 그렇게 작동하지 않습니다. 거기에서 .click()을 제거하십시오.

여기에있는 JavaScript를 읽으면 document.getElementById('foo') ID가 foo 인 HTML 요소를 찾고 있습니다. 당신은 하나도 가지고 있지 않습니다. 난 당신이 몇 가지 있지만 자바 스크립트와 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에 온 클릭을 넣을 수 : ID가 이미지를 부여 .

다른 것은 너무 바인딩 JS 클릭 <img> 위를 이동할 필요 약 맞다.

이 존재하기 전에 요소에 이벤트를 바인딩 할 수 없습니다, 그래서 당신이 onload 경우에 그것을해야

출처

2011-09-10 20:49:35 mpen

<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() 이벤트를 추가하려면 어떻게해야합니까?

답변

관련 문제