I am trying to dynamically add an onclick to an element,
however I just can't get the syntax right. consider the
following function:
function doClick (evt,x) {
// do things with evt and x
}
Which is called statically by:
<button onclick="doClic k(event,this);" >Click me</button>
evt should be a reference to the onclick event, and x to the
element clicked on. But I can't get the syntax right for adding
the element dynamically. The closest I can get is:
ele.onclick = function (){doClick('eve nt','this')};
But when I click on the element, 'event' and 'this' have been
passed is literal strings (i.e. e and x are 'event' and 'this',
literally).
What is the correct syntax?
*Extra comment*
I have tried adding the function this way:
ele.onclick = doClick;
And then use e/window.event to get the event and use
e.target/e.srcElement to get the element clicked on, but that is
not reliable with some browsers. For example, in Safari if you
have an onclick on a TD with text in it and the user clicks on
the text, e.target points to the text node, not the TD. If they
click in the TD but not over the text e.target points to the TD.
This is avoided if the onclick passes 'this', which
unequivocally (I think) gives a reference to the element that
the onclick fired from.
Of course I can climb the DOM tree to find the first onclick and
hope that was the one that fired, but that's messy. It also
creates an issue if there's a link in the cell. Other browsers
will follow the link and not execute the onclick - Safari does
the onclick. Again, I can look to see if target was an A and
follow the link by changing the window.location , but again,
that's messy.
Play code below.
<html><head><ti tle>DynFunc</title>
<script type="text/javascript">
function initButton() {
var ele = document.getEle mentById('theBu tton');
ele.onclick = function (){doClick('eve nt','this')};
}
function doClick(evt,x) {
alert('evt is: ' + typeof(evt)
+ '\nx is: ' + typeof(x));
}
</script>
</head><body>
<button onclick="initBu tton();">Initia lise theButton</button>
<button id="theButton"> theButton</button>
<button onclick="doClic k(event,this);" >Static onclick</button>
</body></html>
--
Rob
--
Rob
however I just can't get the syntax right. consider the
following function:
function doClick (evt,x) {
// do things with evt and x
}
Which is called statically by:
<button onclick="doClic k(event,this);" >Click me</button>
evt should be a reference to the onclick event, and x to the
element clicked on. But I can't get the syntax right for adding
the element dynamically. The closest I can get is:
ele.onclick = function (){doClick('eve nt','this')};
But when I click on the element, 'event' and 'this' have been
passed is literal strings (i.e. e and x are 'event' and 'this',
literally).
What is the correct syntax?
*Extra comment*
I have tried adding the function this way:
ele.onclick = doClick;
And then use e/window.event to get the event and use
e.target/e.srcElement to get the element clicked on, but that is
not reliable with some browsers. For example, in Safari if you
have an onclick on a TD with text in it and the user clicks on
the text, e.target points to the text node, not the TD. If they
click in the TD but not over the text e.target points to the TD.
This is avoided if the onclick passes 'this', which
unequivocally (I think) gives a reference to the element that
the onclick fired from.
Of course I can climb the DOM tree to find the first onclick and
hope that was the one that fired, but that's messy. It also
creates an issue if there's a link in the cell. Other browsers
will follow the link and not execute the onclick - Safari does
the onclick. Again, I can look to see if target was an A and
follow the link by changing the window.location , but again,
that's messy.
Play code below.
<html><head><ti tle>DynFunc</title>
<script type="text/javascript">
function initButton() {
var ele = document.getEle mentById('theBu tton');
ele.onclick = function (){doClick('eve nt','this')};
}
function doClick(evt,x) {
alert('evt is: ' + typeof(evt)
+ '\nx is: ' + typeof(x));
}
</script>
</head><body>
<button onclick="initBu tton();">Initia lise theButton</button>
<button id="theButton"> theButton</button>
<button onclick="doClic k(event,this);" >Static onclick</button>
</body></html>
--
Rob
--
Rob
Comment