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