RWD移动设备图像交换JavaScript

Question

我正在使用一点JavaScript来进行图像交换。

在桌面浏览器上运行良好，但不能在移动/小型设备上运行。

<p><img id="ima" src="images/web_assets/image1.jpg" width="270px" />
</p>
<p><a href="#" onmouseover="showT( 'images/web_assets/image1.jpg' )"><img src="images/web_assets/image1.jpg" width="84px" /></a>&nbsp;<a href="#" onmouseover="showT( 'images/web_assets/image2.jpg' )"><img src="images/web_assets/image2.jpg" width="84px" /></a>&nbsp;<a href="#" onmouseover="showT( 'images/web_assets/image3.jpg' )"><img src="images/web_assets/image3.jpg" width="84px" /></a>
</p>
<script type="text/javascript">
    // <![CDATA[
    function showT(image) {
        document.getElementById('ima').setAttribute('src', image)
    }
    // ]]>
</script>

任何想法如何使这个工作在所有设备(即桌面，ipad, iphone，其他移动设备)?

新代码:

<p><img id="ima" src="images/web_assets/image1.jpg" width="270px" />
</p>
<p><a href="#" onClick="showT( 'images/web_assets/image1.jpg' )"><img src="images/web_assets/image1.jpg" width="84px" /></a>&nbsp;<a href="#" onClick="showT( 'images/web_assets/image2.jpg' )"><img src="images/web_assets/image2.jpg" width="84px" /></a>&nbsp;<a href="#" onClick="showT( 'images/web_assets/image3.jpg' )"><img src="images/web_assets/image3.jpg" width="84px" /></a>
</p>
<script type="text/javascript">
    // <![CDATA[
    function showT(image) {
        document.getElementById('ima').setAttribute('src', image)
    }
    // ]]>
</script>

但是点击一下，它会把页面弹回浏览器的顶部?

Answer 1

'onmouseover'事件并不是让某些东西跨设备工作的最佳选择，因为你在移动设备和平板电脑上根本没有鼠标。

也许可以考虑让它在无鼠标设备的点击事件上工作?