將ontouchstart中的代碼轉換爲onmousedown

我正在編寫一個主要針對iOS Safari的網站，但我也希望它能夠響應正常的桌面。將ontouchstart中的代碼轉換爲onmousedown

所以我有一個需要做一個按鈕，對onmouseup onmouseup事件作出反應，當在桌面上&按鈕對ontouchstart ontouchend在iOS上作出反應。

注：我不能這樣做（剛註冊這兩個事件）：

<img id="button" onmousedown="this.src=''" onmouseup="this.src=''; doSomething();" ontouchstart="this.src=''" ontouchend="this.src=''"

雖然這會工作在桌面上，在iOS，圖像SRC不改變，是與事件的順序iOS模仿。

所以我想在ontouchstart轉移javascript改成onmousedown事件，但我得到的錯誤「ELES [i]是未定義」當我按下按鈕，元素EXIST &有正確的ID：

function enableDesktopGestures() 
{ 
    var eles = new Array(document.getElementById("topicIndex"), 
         document.getElementById("volumeToggle"), 
         document.getElementById("exitModuleBt"), 
         document.getElementById("prevBt"), 
         document.getElementById("nextBt")); 

    for (var i=0; i<eles.length; i++) 
    { 
    eles[i].addEventListener("mousedown", function() { eles[i].getAttribute("ontouchstart"); }, false); 
    eles[i].addEventListener("mouseup", function() { eles[i].getAttribute("ontouchend"); }, false); 
    } 
} 

// No error occurs with this but when I press the buttons nothing happens 
function enableDesktopGestures() 
{ 
    var eles = new Array(document.getElementById("topicIndex"), 
         document.getElementById("volumeToggle"), 
         document.getElementById("exitModuleBt"), 
         document.getElementById("prevBt"), 
         document.getElementById("nextBt")); 

    for (var i=0; i<eles.length; i++) 
    { 
    var down = eles[i].getAttribute("ontouchstart"); 
    var up = eles[i].getAttribute("ontouchend"); 
    eles[i].onmousedown = function() { down; }; 
    eles[i].onmouseup = function() { up; }; 
    } 
}

來源

2011-12-04 Jake M

如果我理解正確的話，如果用戶的瀏覽器是Safari瀏覽器，或者如果沒有其他瀏覽器，則希望將圖像設置爲兩個事件。我認爲你應該驗證哪個瀏覽器有一些驗證，然後設置事件... – 2011-12-06 10:52:09

在你的第二個例子的問題是，在下面的代碼讓您監聽的結果（或類似的東西）：

function() { "valueOfontouchstartAttribute"; }

設置像下面的onmousedown事件屬性似乎爲我工作，但你可能仍然會碰到你事件的順序問題。

eles[i].onmousedown = down;

第一個例子有點古怪。如果您從定義的偵聽器範圍內讀取for循環中的i-iterator的值，則它將具有eles數組長度的值，這可能是因爲您的偵聽器代碼是在不同的範圍。適用範圍FIX：

for(var i = 0; i < eles.length; i++) { 
    var curEl = eles[i]; 
    eles[i].addEventListener("mousedown", function() { curEl.getAttribute("ontouchstart"); }, false); 
}

而且在你的第一個例子你的代碼應該失敗，因爲（如在第一個例子）的ontouchstart屬性的值沒有得到評估。用eval包裝屬性值似乎是一種選擇，但我認爲這是非常危險的，除非您確信您完全可以控制這些屬性值（When is JavaScript's eval() not evil?）......以防萬一：

for(var i = 0; i < eles.length; i++) { 
    var curEl = eles[i]; 
    eles[i].addEventListener("mousedown", function() { eval(curEl.getAttribute("ontouchstart")) }, false) 
}

還有一個問題：當您提到普通桌面時，您希望支持哪些瀏覽器？很多用戶仍在使用IE < 9，我讀了，然後不支持addEventListener方法： addEventListener is not working

在這種情況下，你可以先用測試addEventListener方法的存在和其他依傍的attachEvent。

在頁面加載時將所有監聽器連接起來而不是從HTML中複製它們會不會更容易？

來源

2011-12-06 09:45:51 renevanderark

找到一個關於上述quirkiness封閉描述的參考：http：//blog.morrisjohns.com/javascript_closures_for_dummies（參見示例5） – renevanderark

也：http：///stackoverflow.com/questions/6495156/jquery-cant-get-my-head-around-this – renevanderark

將ontouchstart中的代碼轉換爲onmousedown

回答

相關問題