0

ユーザーがテーブル内のセルをクリックしたことを検出し、そのセルに設定されている bgColor を使用するコードを開発しました。

デスクトップコンピュータではすべて正常に動作しますが、iPad を使用しようとすると何も起こりません。touchstart を使用しようとしましたが、違いはありませんでした。

私はこれを変更しようとしました:-

 t[i].onclick = getVal;

これに:-

t[i].addEventListener('touchstart', function(){getVal});

しかし、これは機能していません....デスクトップとタッチデバイスの両方をサポートする必要もあります....この状況で両方をサポートする方法がわかりません。

私の現在のコードは次のようになります:-

<script type="text/javascript">

function getVal(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    var colorSelected = targ.attributes.bgcolor.value;
    alert(colorSelected);
}
onload = function() 
{
    var ids = ['colorchart1', 'colorchart2', 'colorchart3', 'colorchart4', 'colorchart5'];
    for(var j = 0; j < ids.length; j++) 
    {
        var t = document.getElementById(ids[j]).getElementsByTagName("td");
        for ( var i = 0; i < t.length; i++ )
            t[i].onclick = getVal; 
    }
}

</script>



<table id="colorchart1">
<tr>
<td bgColor="#F8E0E0"></td><td bgColor="#F8ECE0"></td><td bgColor="#F7F8E0"></td><td   bgColor="#ECF8E0"></td>
<td bgColor="#E0F8E0"></td><td bgColor="#E0F8EC"></td><td bgColor="#E0F8F7"></td><td bgColor="#E0ECF8"></td><td bgColor="#E0E0F8"></td>
</tr><tr>
<td bgColor="#F5A9A9"></td><td bgColor="#F5D0A9"></td><td bgColor="#F2F5A9"></td><td bgColor="#D0F5A9"></td>
<td bgColor="#A9F5A9"></td><td bgColor="#A9F5D0"></td><td bgColor="#A9F5F2"></td><td bgColor="#A9D0F5"></td><td bgColor="#A9A9F5"></td>
</tr>
<table>
4

1 に答える 1

1

このハンドル関数はどうですか？

function handler(e){
 e.target.nodeName!='TD'||alert(e.target.bgColor+' on '+
 e.target.parentNode.parentNode.parentNode.id);
}
window.addEventListener('click',handler,false);

or 

window.addEventListener('touchstart',handler,false);

デモ

http://jsfiddle.net/gfmbkmmn/

複数のテーブルで

http://jsfiddle.net/gfmbkmmn/1/

上記の関数は、1 つのイベント ハンドラーで複数のテーブルを処理する代替ソリューションです。エラーを見つけるには、より多くの情報が必要です:

注：iosでは、「現在のコード」window.onloadのタグについてscript、getVal機能は何ですか？

コードについて質問がある場合は、

編集

function getVal(e){
 e=e||window.event;//not needed
 e.target=e.target||e.srcElement;//not needed
 if(e.target.nodeName=='TD'){// check if it's a td
  alert(e.target.bgColor);// why write  'targ.attributes.bgcolor.value' ?
 }
}

ノードのバグは7年前のものです「7年前に...によって変更されました」 http://bugs.jquery.com/ticket/1148

js は大文字と小文字を区別します:bgcolor != bgColor

http://jsfiddle.net/gfmbkmmn/2/この基本的な例を使用すると、高速なカラー パレットを作成できます。

于 2014-08-28T13:49:50.327 に答える