ontouchstartのonmousownownへの転送コード

Question

私は、主にiOS Safariでターゲット設定されたウェブサイトをプログラミングしていますが、通常のデスクトップにも対応したいと考えています。

デスクトップ上にあるonmousedown onmouseupのイベントにボタンを反応させる必要があります。&ボタンはiOSのontouchstart ontouchendに反応するボタンです。

注：私はこれを行うことはできません（ただ、両方のイベントに登録）：

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

これはiOSでは、デスクトップ上で動作する一方で、画像のsrcは変更されません、イベントの順序とは何かiOSの模倣物。

だかられるonmousedownにontouchstartでJavaScriptを転送しようとしていますが、私はエラーが出る "elesを[i]が定義されていない" 私はボタンを押すと、要素が&が正しいIDの持ちEXIST：

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

Answer 1

を

あなたの第二の例では、問題は、次のコード（または同様のもの）で追加したリスナーの結果ということである：以下のようれるonmousedown属性は私のために働くように思わ設定

function() { "valueOfontouchstartAttribute"; } 

が、その後、あなたはまだあなたに遭遇するかもしれませんイベントの順序問題。

eles[i].onmousedown = down; 

最初の例はちょっと風変わりです。 for-loopのi-iteratorの値を、定義したリスナーのスコープ内から読み取ると、eles配列の長さの値が得られます。これは、リスナー・コードが別の範囲。スコープ修正：ontouchstart属性の値が評価されません（最初の例のように）ので

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

また、あなたの最初の例では、あなたのコードが失敗しました。あなたがこれらの属性値（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) 
} 

のように、属性値をevalで囲むことは選択肢のようですが、かなり危険です。

もう1つ質問：通常のデスクトップを参照する際、どのブラウザをサポートしたいですか？ユーザーがまだIE < 9を使用しての多くは、私が読んでaddEventListenerメソッドは、その後、サポートされていません。 addEventListener is not working

あなたはaddEventListenerメソッドの存在を最初のテストを使用し、それ以外のattachEventに頼ることができ、この場合。

HTMLからそれらをコピーする代わりに、すべてのリスナーをページの読み込みに添付する方が一般的には簡単ではないでしょうか？