如何通過移動用戶的href鏈接模擬javascript onClick事件

我有一個html頁面，我使用javascript更改用戶在點擊它時看到的圖像。其中一個鏈接的例子如下。如何通過移動用戶的href鏈接模擬javascript onClick事件

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

這不適用於我試過的任何瀏覽器，更不用說移動之一。

有什麼我在做什麼fundementally錯誤？
有沒有另一種方法來做我想要的？

謝謝。

來源

2011-05-23 Frank

嘗試' 2011-05-23 12:34:14

請定義手機瀏覽器用戶？我們在這裏談論觸摸屏嗎？你有沒有嘗試觸摸和開啓事件？ – Till 2011-05-23 12:44:51

是的，我主要關注iOS和Android用戶。我沒有嘗試過那些。我現在會。然而，我也想使用通過鏈接來模擬這個功能來迭代頁面上的所有圖像並揭示「祕密」圖像。 – Frank 2011-05-23 12:50:56

好第一關，我不認爲你需要使用

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>

但我會建議搞清楚什麼不想要的兼容性和尋找替代的這些其他瀏覽器：谷歌「野生動物園onmousedown事件替換」爲例。

來源

2011-05-23 12:56:07 Jonathon

問題第1部分（爲了使這更明顯的，而不是迷失在評論）：

「手機瀏覽器」，如觸摸屏輸入控制的瀏覽器顯然不具備鼠標交互事件。相反，他們通常實現觸摸屏特定的類似事件，在你的情況下是ontouchstart（）和ontouchend（）。

問題2部分：

而不是爲每個圖像發射click事件編程，以顯示所有圖片我會做這樣的事情：

<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, 0, true)" onmouseup="SwapImage(this, 0, false)" ontouchstart="SwapImage(this, 0, true)" ontouchend="SwapImage(this, 0, false)" width="400" height="400" /> 
    <img alt="Click" id="Swapimage2" onmousedown="SwapImage(this, 1, true)" onmouseup="SwapImage(this, 1, false)" ontouchstart="SwapImage(this, 1, true)" ontouchend="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>

來源

2011-05-23 14:24:15 Till

如何通過移動用戶的href鏈接模擬javascript onClick事件

回答

相關問題