JavaScript OnClick无法在iOS上使用 [英] JavaScript OnClick not working on iOS

问题描述

我已经开发了代码，该代码可以检测用户何时单击表中的单元格，然后使用为该单元格设置的bgColor.

在台式机上一切正常，但是当我尝试使用iPad时，它什么也没做.我尝试使用touchstart，但这没什么区别.

我尝试更改此设置:-

  t [i] .onclick = getVal; 

对此:-

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

但是这没有用....我还需要同时支持台式机和触摸设备....所以不确定如何在这种情况下同时支持这两种设备.

我当前的代码如下:-

 < script type ="text/javascript">函数getVal(e){var targ;如果(！e)var e = window.event;如果(e.target)targ = e.target;否则(e.srcElement)targ = e.srcElement;if(targ.nodeType == 3)//击败Safari错误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");对于(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> 

解决方案

此句柄函数如何?

 函数处理程序(e){e.target.nodeName！='TD'|| alert(e.target.bgColor +'on'+e.target.parentNode.parentNode.parentNode.id);}window.addEventListener('click'，handler，false);或者window.addEventListener('touchstart'，handler，false); 

演示

http://jsfiddle.net/gfmbkmmn/

具有多个表

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

上述功能是使用一个事件处理程序处理多个表的替代解决方案.要找到您的错误，需要更多信息:

注意:在ios中，最好编写 window.onload ，然后在当前代码"中编写 script 标签呢?getVal函数是什么?/p>

如果您对代码有任何疑问，请问

编辑

 函数getVal(e){e = e || window.event;//不需要e.target = e.target || e.srcElement;//不需要if(e.target.nodeName =='TD'){//检查是否是tdalert(e.target.bgColor);//为什么要写'targ.attributes.bgcolor.value'?}} 

节点错误来自7年前的"7年前由...更改" http://bugs.jquery.com/ticket/1148

js区分大小写: bgcolor！= bgColor

http://jsfiddle.net/gfmbkmmn/2/这个基本示例可让您创建快速的调色板.

I have developed code which detects when a user clicks on a cell in a table, and then uses the bgColor that has been set for that cell.

All works fine on the desktop computer, but when I try to use my iPad, it does nothing. I have tried to use touchstart but this had made no difference.

I tried changing this:-

 t[i].onclick = getVal;  

to this:-

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

But this has not worked....I will also need to support both desktop and touch devices....so not sure how I go about ensuring I support both in this situation.

My current code looks like this:-

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

解决方案

what about this handle function?

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

demo

http://jsfiddle.net/gfmbkmmn/

with multiple tables

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

the above function is an alternative solution to handle multiple tables with one event handler. to find your error more info is needed:

note: in ios is better that you write window.onload, and what about the script tags in your "current code", what does the getVal function?

if you have any questions about the code just ask

EDIT

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' ?
 }
}

the node bug is from 7 years ago "Changed 7 years ago by ..." http://bugs.jquery.com/ticket/1148

js is case sensitive : bgcolor != bgColor

http://jsfiddle.net/gfmbkmmn/2/ this basic example allows you to create a fast color palette.

这篇关于JavaScript OnClick无法在iOS上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！