Làm cách nào để kích hoạt sự kiện phát trên javascript mà không cần gửi người dùng lên đầu trang?

Question

Tôi có đoạn mã sau vào một trang trên trang web của tôi - khi người dùng nhấp vào hình ảnh một âm thanh đóng:

<script language="javascript" type="text/javascript"> 
function playSound(soundfile) { 
document.getElementById("dummy").innerHTML= 
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; 
} 
</script> 
<span id="dummy"></span> 
<div id="soundimage"> 
<a href="#" onclick="playSound('sound.mp3');"><img src="image.png" /></a> 
</div> 

Tất cả đều hoạt động tốt, nhưng hình ảnh là ở dưới cùng của trang, và khi người dùng nhấp vào hình ảnh họ được chuyển hướng trở lại đầu trang. Có cách nào để có được điều này làm việc để chỉ có một thay đổi âm thanh, và không phải là một hình ảnh (nếu điều đó có ý nghĩa!)?

Khi sử dụng một chức năng di chuột thay vào đó, chẳng hạn như

<a onmouseover="playSound('sound.mp3');"><img src="image.png" /></a> 

người dùng vẫn còn nơi họ trên trang web, nhưng tôi muốn họ có thể lựa chọn chơi âm thanh trên nhấp chuột và không phải trên rollover.

Answer 1

Sự cố là thuộc tính href của bạn. # dưới dạng một neo gửi nó lên đầu trang. Sử dụng

<a href="javascript: void(0);" onclick="playSound('sound.mp3');">...</a> 

Ngoài ra, luôn bao gồm thuộc tính href cho liên kết.

Answer 2

Bạn có thể (và tôi nghĩ là chính xác hơn trong trường hợp hỗ trợ Javascript bị giới hạn), để sử dụng một liên kết như:

<a href="#" onclick="playSound('sound.mp3'); return false;">...</a> 

thay vì Grexis một, bởi vì nếu trình duyệt bạn đang sử dụng doesn' t hỗ trợ Js, sau đó sự kiện "onclick" sẽ không bao giờ được kích hoạt và do đó Js sẽ không được đọc. Nó sẽ không là một vấn đề, có lẽ, nhưng bạn vẫn nên xem xét sử dụng kỹ thuật mã hóa tốt hơn.

Answer 3

thay vì có sự kiện onclick trong thẻ, hãy loại bỏ và đặt thẻ đó vào thẻ img. nếu bạn thích con trỏ cho các liên kết, bạn cũng có thể thay đổi kiểu.

Mã mẫu đã được thụt lề để nó thực sự hiển thị trong bài đăng.

<img src="image.png" style="cursor:pointer;" onclick="playSound ('sound.mp3')" />