如何解决如何通过href链接为移动用户模拟javascript onClick事件
|| 我有一个html页面,我在其中使用javascript来更改用户单击时看到的图像。以下是其中一个链接的示例。<img alt=\"Click\" height=\"400\" name=\"smile\" onmousedown=\"document.images[\'smile\'].src=\'http://foobar.com/image2.jpg\'\" onmouseup=\"document.images[\'smile\'].src=\'http://foobar.com/image1.jpg\'\" src=\"http://foobar.com/image1.jpg\" width=\"400\" />
问题是这不适用于移动浏览器用户。我尝试使用以下命令模拟对此图像的点击:
<a href=\"JavaScript:document.images[\'smile\'].click()\">click here</a>
我尝试使用的任何浏览器都无法使用此功能,更不用说移动浏览器了。
我的工作在根本上有问题吗?
是否有其他方法可以执行我正在尝试的操作?
谢谢。
解决方法
首先,我认为您不需要使用
document.images[\'smile\']
而是应该可以正常工作:
<img alt=\"Click\" height=\"400\" name=\"smile\" onmousedown=\"this.src=\'http://foobar.com/image2.jpg\'\" onmouseup=\"this.src=\'http://foobar.com/image1.jpg\'\" src=\"http://foobar.com/image1.jpg\" width=\"400\">
我对浏览器的兼容性了解甚少,但是您可以尝试其他几种方法,看看它们是否对您有用。
<img onClick=\"\">
<img onMousOver=\"\" onMouseOut=\"\">
我能想到的第二个代码唯一的问题是定义了简单的单击就没有行为,只有定义了鼠标向下/向上的行为。
因此,尝试类似:
<a href=\"javascript:this.smile.src=\'http://foobar.com/image2.jpg\'\"><img .... id=\"smile\"></a>
但是我建议您弄清楚您要兼容的其他浏览器中什么不起作用,并寻找替换项:例如google \“ safari onMouseDown替换项\”。
,第1部分的问题(为了使这一点更明显而不致于在评论中迷失):
触摸屏输入控制的浏览器中的“移动浏览器”显然没有鼠标交互事件。相反,它们通常实现特定于触摸屏的类似事件,在您的情况下为ontouchstart()和ontouchend()。
问题第二部分:
为了显示所有图像,我不会以编程方式触发每个图像的点击事件,而是这样做:
<html>
<head>
<script type=\"text/javascript\">
var images = [{\"DomId\" : \"Swapimage1\",\"RegSrc\" : \"image1.jpg\",\"ClkSrc\" : \"image2.jpg\"},{\"DomId\" : \"Swapimage2\",\"RegSrc\" : \"image3.jpg\",\"ClkSrc\" : \"image4.jpg\"}];
function LoadImages() {
for (var image in images) {
document.getElementById(images[image].DomId).src = images[image].RegSrc;
}
}
function SwapImage(imageObject,imageId,isClicked) {
imageObject.src = isClicked ? images[imageId].ClkSrc : images[imageId].RegSrc;
}
function SwapAllImages(isClicked) {
for (var image in images) {
document.getElementById(images[image].DomId).src = isClicked ? images[image].ClkSrc : images[image].RegSrc;
}
}
</script>
</head>
<body OnLoad=\"LoadImages()\">
<img alt=\"Click\" id=\"Swapimage1\" onmousedown=\"SwapImage(this,true)\" onmouseup=\"SwapImage(this,false)\" ontouchstart=\"SwapImage(this,true)\" ontouchend=\"SwapImage(this,false)\" width=\"400\" height=\"400\" />
<img alt=\"Click\" id=\"Swapimage2\" onmousedown=\"SwapImage(this,1,false)\" width=\"400\" height=\"400\" />
<a href=\"#\" id=\"SwapAllLink\" onmousedown=\"SwapAllImages(true)\" onmouseup=\"SwapAllImages(false)\" ontouchstart=\"SwapAllImages(true)\" ontouchend=\"SwapAllImages(false)\">Swap All Images</a>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。