By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,442 Members | 1,302 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,442 IT Pros & Developers. It's quick & easy.

Is it possible to force re-avaluating/re-parsing of HTML?

P: n/a
Hi,

Ran into the following problem while trying to have a code to
attach a Virtual Keyboard to any user's form:

User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.

a) Value - (already typed text) is not assigned back
b) outerHTML is still the same - both in alert() text and via
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;
The code is simple so I wander whether we have a way to force HTML to be
re-avaluated/re-parsed via a button click

(if I do the same via <script....</scriptline placed above the button
then everything is OK - because HTML is being changed _before_ the
page load is over)

=======================================
function vkb_addAttributes(obj)
{

var obj_value = ""; if (obj.value != "") obj_value = obj.value;
var kA=" onFocus='vkb_txtControl=this;' OnSelect='vkb_saveCaret(this)'";

var obj_HTML = obj.outerHTML;
var pos = obj_HTML.indexOf('>');
var part1 = obj_HTML.substring(0,pos);
var part2 = obj_HTML.substring(pos);
obj.outerHTML = part1 + kA + part2;

obj.value = obj_value;
}
=============================================

Thanks,
Paul
Sep 25 '06 #1
Share this Question
Share on Google+
51 Replies


P: n/a

Paul Gorodyansky wrote:
User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.
Why are you adding to the elements onclick in reaction to a user click?
Is it that the user has many choices, and each choice assigns a
different event to the element's onclick? If not, then you should just
add to the elements onclick onload, with something like this:
http://simon.incutio.com/archive/200...6/addLoadEvent

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});

Sep 25 '06 #2

P: n/a
Hi,

Jake Barnes wrote:
>
Paul Gorodyansky wrote:
User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.

Why are you adding to the elements onclick in reaction to a user click?
Is it that the user has many choices, and each choice assigns a
different event to the element's onclick?
No, just sample onclick.

But I want to add them to <textarea NOT on page load, but later -
when a user clicks on my button (because s/he may never need
Virtual Keyboard - why them should I change input fields HTML?)

Please see 1st message once more to see what I mean.

--
Regards,
Paul
Sep 25 '06 #3

P: n/a

Yes, by the way, you need some SOAP and AJAX, pun intended :), SOAP
a metadata file in markup, your HTML fragment, and AJAX, Asynchronous
Javascript And XML, nevermind the XML part, it really manages
anything ASCII, but originally intended for XML, though it does XML
metadata as nodes as well. The Asynchronous means, you don't serve
the fragment(s) on pageload, or at once upon pageload or preloaded
synchronously with the page, you do it asynchronously, at a later
time, in this case, by onclick, to load the metadata string in html
markup from the server upon the event. One used by many is the
"Prototype" set, which is a premade one for requesting files
asynchronously to the webserver. Just google for it.


Danny
Sep 25 '06 #4

P: n/a
Paul Gorodyansky wrote:
Hi,

Ran into the following problem while trying to have a code to
attach a Virtual Keyboard to any user's form:

User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.

a) Value - (already typed text) is not assigned back
b) outerHTML is still the same - both in alert() text and via
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;
As far as I know , you can just add or modify the element's
attribute to accomplish what you want . You needn't to
let the explorer to re-parse the HTML !

Sep 25 '06 #5

P: n/a
Bo Yang wrote:
>
As far as I know , you can just add or modify the element's
attribute to accomplish what you want . You needn't to
let the explorer to re-parse the HTML !
It's what I thought, too but no, it does not work if my change
function is called on a button click - Source shows that HTML code
of <textarea was not changed

I tried in both IE and Firefox. It's why I asked
"how to force browser to re-parse HTML _after_ the page load is over -
on a button's click"

--
Regards,
Paul
Sep 25 '06 #6

P: n/a
Hi,

Danny wrote:
>
Yes, by the way, you need some SOAP and AJAX, pun intended :), SOAP
a metadata file in markup, your HTML fragment, and AJAX, Asynchronous
Javascript And XML, nevermind the XML part, it really manages
anything ASCII, but originally intended for XML, though it does XML
metadata as nodes as well. The Asynchronous means, you don't serve
the fragment(s) on pageload, or at once upon pageload or preloaded
synchronously with the page, you do it asynchronously, at a later
time, in this case, by onclick, to load the metadata string in html
markup from the server upon the event. One used by many is the
"Prototype" set, which is a premade one for requesting files
asynchronously to the webserver. Just google for it.

Danny
No, I can not use any _server_ stuff - need to solve using only client
things - browser and JavaScript

--
Regards,
Paul
Sep 25 '06 #7

P: n/a
I am not sure why you need to modify the HTML to add a JS event
handler. Just add the event handler in JS like this:

myelement.onload = myfunction;

function myfunction()
{
}

Sep 27 '06 #8

P: n/a

Paul Gorodyansky wrote:
Hi,

Jake Barnes wrote:

Paul Gorodyansky wrote:
User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.
Why are you adding to the elements onclick in reaction to a user click?
Is it that the user has many choices, and each choice assigns a
different event to the element's onclick?

No, just sample onclick.

But I want to add them to <textarea NOT on page load, but later -
when a user clicks on my button (because s/he may never need
Virtual Keyboard - why them should I change input fields HTML?)
You add the event handler on page load. That is, once the page is
loaded, add a function to the textarea's event handlers. Do you want
something to happen when focus shifts to the textarea? Then add a
function to the onfocus event of the textarea (add it on page load to
ensure the HTML of the textarea is really there).

Or if you really want to add it to the button, then add it to the
onclick of the button on page load.

Can we see the page? A url?

Sep 29 '06 #9

P: n/a
Hi,

Sorry, was out of town

Jake Barnes wrote:
>
Paul Gorodyansky wrote:
Hi,

Jake Barnes wrote:
>
Paul Gorodyansky wrote:
User clicks a button and my JavaScript changes outerHTML
of say <textarea - adding things like ONCLICK='saveCaret(this)'
etc. and it also tries to save any text that user could've entered
before the button press.
>
...
But I want to add them to <textarea NOT on page load, but later -
when a user clicks on my button (because s/he may never need
Virtual Keyboard - why them should I change input fields HTML?)

You add the event handler on page load. That is, once the page is
loaded, add a function to the textarea's event handlers.
It's what I was doing (see above) - by changing outerHTML of that
<textarea. How else can I add eventhandler? I saw some other methods
but they were "Internet Explorer only"

So if I add an eventhandler such as say onfocus or onclick this way
then everything works Ok:
<script type="text/javascript">vkb_Init();</script>
because the page is still under evaluation by the browser so it 'sees'
that some new handlers have been added.

But if I want to avoid having such line as above and what to perform
same vkb_Init() when a user clicks a button then those additional
eventhandlers are NOT seen by browser (for example,
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;
does not show them) - they do NOT work -
it seems that "it's too late to add eventhandlers"

So this does not work:
Or if you really want to add it to the button, then add it to the
onclick of the button on page load.
and this is why I asked the question the way I did - how to force
a browsers to re-look at a text object to realize that some new
eventhandlers have been added.

Can we see the page? A url?
http://RusWin.net/vkbFly2e.htm

--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net
Oct 5 '06 #10

P: n/a
Hi,

fjanon wrote:
>
I am not sure why you need to modify the HTML to add a JS event
handler. Just add the event handler in JS like this:

myelement.onload = myfunction;

function myfunction()
{
}
What does "onload" means? Page's onload? Is it "IE-only" method?

I don't need to do anything on "onload" - I need to _modify_
text inout fields by adding some evenhandlers to them:

Say a page has <textarea and/or <input type-text objects
and my Virtual Keyboard needs to "attach" itself to those input
fields - for them to have the following eventhandlers:
onFocus='vkb_txtControl = this;' OnSelect='vkb_saveCaret(this)' OnClick='vkb_saveCaret(this)' OnKeyUp='vkb_saveCaret(this)'

--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net
Oct 5 '06 #11

P: n/a
Paul Gorodyansky wrote:
Hi,

fjanon wrote:
>>I am not sure why you need to modify the HTML to add a JS event
handler. Just add the event handler in JS like this:

myelement.onload = myfunction;

function myfunction()
{
}


What does "onload" means? Page's onload? Is it "IE-only" method?

I don't need to do anything on "onload" - I need to _modify_
text inout fields by adding some evenhandlers to them:
Which you can do in your window.onload() method.

--
Ian Collins.
Oct 5 '06 #12

P: n/a
Ian Collins wrote:
>
Which you can do in your window.onload() method.
It's not _my_ page - I am preparing the code of my Virtual Keyboard
for _other_ people to use on their sites/forums - often their
pages are PHP-generated.

It's why I don't whant to use things like
<body onload...>

It's too intrusive, IMHO.

But it's not the point any way - there is no difference between my
current approach - asking them to insert the following line
below their input fields -
<script type="text/javascript">vkb_Init();</script>
and asking them to insert
onload...
stuff to their <body statement.

In both cases I cause their objects to be modified EVEN if
a button that calls Virtual Keyboard will never be pressed!

I am trying (and asking here) to add evenhandlers to some one's
input fields in a different way - ONLY if an end user click
Virtual Keyboard button - I want, during the very first click -
do the same that vkb_Init(); does currently - add several
eventhandlers (onfocus, onkeyup, ...) to all text input fields -

but it does NOT work - "too late" - the page has already been loaded
and browser does not see those added evenhandlers
(please see my today's answer to Jake above)

--
Regards,
Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://RusWin.net
Russian On-screen Keyboard: http://Kbd.RusWin.net
Oct 5 '06 #13

P: n/a
Paul Gorodyansky wrote:
Ian Collins wrote:
>>Which you can do in your window.onload() method.


It's not _my_ page - I am preparing the code of my Virtual Keyboard
for _other_ people to use on their sites/forums - often their
pages are PHP-generated.

It's why I don't whant to use things like
<body onload...>

It's too intrusive, IMHO.

But it's not the point any way - there is no difference between my
current approach - asking them to insert the following line
below their input fields -
<script type="text/javascript">vkb_Init();</script>
and asking them to insert
onload...
stuff to their <body statement.

In both cases I cause their objects to be modified EVEN if
a button that calls Virtual Keyboard will never be pressed!

I am trying (and asking here) to add evenhandlers to some one's
input fields in a different way - ONLY if an end user click
Virtual Keyboard button - I want, during the very first click -
do the same that vkb_Init(); does currently - add several
eventhandlers (onfocus, onkeyup, ...) to all text input fields -

but it does NOT work - "too late" - the page has already been loaded
and browser does not see those added evenhandlers
(please see my today's answer to Jake above)
Ah, OK, I missed the bit about other code.

DOM manipulation can an will take effect when applied. Have you tried
just setting the target element's onclick property?

--
Ian Collins.
Oct 5 '06 #14

P: n/a
Ian Collins wrote:
>
...
DOM manipulation can an will take effect when applied. Have you tried
just setting the target element's onclick property?
Yes, it was 1st thing I tried to use but could not find a way to do it
and this is why started to use outerHTML to add onclick onfocus onkeyup
to the input fields HTML code.

Don't remember now where I looked - I do remember that I searched
Google exactly for that -
"set element's onclick property" - but found only something like this -

http://www.devguru.com/Technologies/...ript/10846.asp
or this: http://bton.com/tb16/jsref/object4.html#anchor540568

where I could not find what I was looking for - how to _add_
onclick="myFunction", onfocus="myFunction", onkeyup="myFunction",
onkeypress="myFunction".

I saw some other methods but they were "Internet Explorer only".

--
Regards,
Paul
Oct 5 '06 #15

P: n/a
Paul Gorodyansky wrote:
>
I saw some other methods but they were "Internet Explorer only".
I meant the following (which, being it cross-browser thing, would be
exactly what I need):

<SCRIPT LANGUAGE=javascript FOR=textEl EVENT=onfocus>
myFunction(event);
</SCRIPT>
--
Regards,
Paul
Oct 5 '06 #16

P: n/a
Paul Gorodyansky wrote:
Ian Collins wrote:
>>...
DOM manipulation can an will take effect when applied. Have you tried
just setting the target element's onclick property?


Yes, it was 1st thing I tried to use but could not find a way to do it
and this is why started to use outerHTML to add onclick onfocus onkeyup
to the input fields HTML code.

Don't remember now where I looked - I do remember that I searched
Google exactly for that -
"set element's onclick property" - but found only something like this -

http://www.devguru.com/Technologies/...ript/10846.asp
or this: http://bton.com/tb16/jsref/object4.html#anchor540568

where I could not find what I was looking for - how to _add_
onclick="myFunction", onfocus="myFunction", onkeyup="myFunction",
onkeypress="myFunction".

I saw some other methods but they were "Internet Explorer only".
What exactly is the sequence of events you use? The user loads a page
(any page?) and then does something to add a virtual keyboard, how?

--
Ian Collins.
Oct 5 '06 #17

P: n/a
Ian Collins wrote:
>
What exactly is the sequence of events you use? The user loads a page
(any page?) and then does something to add a virtual keyboard, how?
Currently I offer site owners or forum Administrators the following
(seeing on http://RusWin.net/readme_e.htm and say
on working example at http://RusWin.net/vkbFly2e.htm ):

1) Add one line to <headwith vkb_load.js
(this .js loads then other .js and several .css 'silently' to the
<head>)

2) Below last input field of the form (it could be numerous <textarea
and/or <input type=text fields) insert the line

<script type="text/javascript">vkbInit(document.inputForm);</script>

that function successfully adds onfocus, onkeypressed, and other I need
to
the text input field (because it's executed while the page is still
under "evaluation" by the browser, so browser does notice those
additional evenhandlers on text fields)

If I copy this into the address bar (found somewhere on the Web)
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>');
document.body.innerHTML = x;

then I see my changes! That is, I see onfocus=, onclick=, etc. in text
fields' HTML

3) Add a line that user of their site/forum woudl use to call Virtual
Keyboard, say
<BUTTON TYPE=button onclick="blur(); showKbd(); return false;" .........

===========================================

The above works just FINE - as working examples show.

But I created this thread to try to do the same DIFFERENT way -
without item (2) - to avoid changing objects 'just in case' -
who knows may be a user never clicks on Keyboard button -

instead of (2) I wanted to execute that vkb_Init() which adds
evenhandlers only when a user clicks on Keyboard button.

I tried and it failed and it's why I opened this thread -
looks like when I do the additions after a user clicks the button,
it's too late - the page has already been evaluated by the browser
and browser does NOT see the additions (onfocus, onclick,...) I made
in vkb_Init() when it's called after a user clicks the button -
nothing works and also page's source does not show those additions
if I paste the "look at source" line into the address bar.

So I am asking, "How to force a browser to re-evaluate HTML code
of the forms' elements".

But if it's not possible:

may be it does not work because I do those additions via
outerHTML of the objects. Is there another way to add eventhandlers?

outerHTML was the only (cross-browser) thing I found when I used
Google for something like, "Add textarea properties".

Because again, this thing (which is what I want) is IE-only:
<SCRIPT LANGUAGE=javascript FOR=textEl EVENT=onfocus>
myFunction(event);
</SCRIPT>
--
Regards,
Paul
Oct 6 '06 #18

P: n/a
Paul Gorodyansky wrote:
Ian Collins wrote:
>>What exactly is the sequence of events you use? The user loads a page
(any page?) and then does something to add a virtual keyboard, how?

I tried and it failed and it's why I opened this thread -
looks like when I do the additions after a user clicks the button,
it's too late - the page has already been evaluated by the browser
and browser does NOT see the additions (onfocus, onclick,...) I made
in vkb_Init() when it's called after a user clicks the button -
nothing works and also page's source does not show those additions
if I paste the "look at source" line into the address bar.

So I am asking, "How to force a browser to re-evaluate HTML code
of the forms' elements".

But if it's not possible:

may be it does not work because I do those additions via
outerHTML of the objects. Is there another way to add eventhandlers?
Could be, I've never tried that.

Just do theTextarea.onfocus = yourMethod();

--
Ian Collins.
Oct 6 '06 #19

P: n/a
Ian Collins wrote:
>

may be it does not work because I do those additions via
outerHTML of the objects. Is there another way to add eventhandlers?
Could be, I've never tried that.

Just do theTextarea.onfocus = yourMethod();
Thanks!
Looks nice and simple - why didn't I find such examples when was
looking for the way to add evenhandlers to text fields?

Will go now and try that.

--
Regards,
Paul
Oct 6 '06 #20

P: n/a
Paul Gorodyansky wrote:
>
Ian Collins wrote:

Just do theTextarea.onfocus = yourMethod();
Now I guess I remember that I did try such way... But can not remember
why I dropped that idea :-)

Will try again...

--
Regards,
Paul
Oct 6 '06 #21

P: n/a
Ian Collins wrote:
>

Just do theTextarea.onfocus = yourMethod();
I tried in IE and Firefox - same result - does not work:

2 input fields; onfocus suppose to let me know which one
has focus (and I added t++ to check the behavior):

var t=0; var textControl=null;
function myFunction(obj)
{
t++; textControl=obj;
}

The line like
<script>txtField.onfocus=myFunction(this); </script>

or
<script>vkb_Init(); </script>

where 1st lines are
txtField = document.inputForm.text_Area;
txtField.onfocus=myFunction(this);

supposed to "add onfocus evenhandler for future, when focus
will be in that field". Right?

But in reality:
- it executes at once (no focus was placed by a user) -
if I place alert(obj) into myFunction() I see that

- 'this' - not a txtField, but 'window' (it's what alert(obj) shows)

- t++ immediately works.
Now, onfocus does not work as a property - I can - as a user - switch
focus from that field and to that field - nothing happens,
myFunction() is not called.

I made a button where a click just shows a value of t -
and whatever number of times I place cursor to that field
the click still shows digit 1 -
that one time when myFunction() was _executed_ while I wanted
txtField.onfocus= be a command to add a property and not to run at once

:(

Now I remember that I did try that way :)

--
Regards,
Paul
Oct 6 '06 #22

P: n/a
Paul Gorodyansky wrote:
Ian Collins wrote:
>>
Just do theTextarea.onfocus = yourMethod();


I tried in IE and Firefox - same result - does not work:

2 input fields; onfocus suppose to let me know which one
has focus (and I added t++ to check the behavior):

var t=0; var textControl=null;
function myFunction(obj)
{
t++; textControl=obj;
}

The line like
<script>txtField.onfocus=myFunction(this); </script>

or
<script>vkb_Init(); </script>

where 1st lines are
txtField = document.inputForm.text_Area;
txtField.onfocus=myFunction(this);

supposed to "add onfocus evenhandler for future, when focus
will be in that field". Right?

But in reality:
- it executes at once (no focus was placed by a user) -
if I place alert(obj) into myFunction() I see that
That's because I accidentally mislead you,it should be

txtField.onfocus=myFunction; <- note no parenthesis.

Sorry...

--
Ian Collins.
Oct 6 '06 #23

P: n/a
Ian Collins wrote:
>
it should be

txtField.onfocus=myFunction; <- note no parenthesis.

Sorry...

I guess I did try that too some time ago - now I remember that I
made it to work when left just function name as you show now...

If I remember correctly, the problem then is with _parameters_ -
how to provide them if I can write just a name of a function?

Because most fo the functions do need them, for example

onKeyDown='Kbd_OnOff(this, event)'
--
Paul
Oct 6 '06 #24

P: n/a
Paul Gorodyansky wrote:
Ian Collins wrote:
>>it should be

txtField.onfocus=myFunction; <- note no parenthesis.

Sorry...

I guess I did try that too some time ago - now I remember that I
made it to work when left just function name as you show now...

If I remember correctly, the problem then is with _parameters_ -
how to provide them if I can write just a name of a function?

Because most fo the functions do need them, for example

onKeyDown='Kbd_OnOff(this, event)'
event is always available in an event handler, either as a parameter
(newer browsers) or window.event (IE). Anything else (like an object to
use) can be bound to the event target.

--
Ian Collins.
Oct 6 '06 #25

P: n/a
Ian Collins wrote:
>
Paul Gorodyansky wrote:
Ian Collins wrote:
>it should be

txtField.onfocus=myFunction; <- note no parenthesis.

Sorry...


I guess I did try that too some time ago - now I remember that I
made it to work when left just function name as you show now...

If I remember correctly, the problem then is with _parameters_ -
how to provide them if I can write just a name of a function?

Because most fo the functions do need them, for example

onKeyDown='Kbd_OnOff(this, event)'
event is always available in an event handler, either as a parameter
it's my point - if we can NOT have any parameters - in the case of
txtField.onfocus=myFunction;

where there are no parameters can be used - then this method of adding
a handler is not good... Am I missing something?

off-topic :) -
Anything else (like an object to use) can be bound to the event target.
Just curious - say I used another method of adding a handler -
one that lets me use parameters (like outerHTML) and I sent (event) -
how them can I get "object to use"?
That is, are you saying that instead of
<textarea onKeyDown='Kbd_OnOff(this, event)' ...
I can use
<textarea onKeyDown='Kbd_OnOff(event)' ...
i.e. without 'this' as a parameter
and then somehow get a hold of that textarea object from inside
that function without such parameter?

--
Paul
Oct 6 '06 #26

P: n/a
GLC
For dynamically added event handlers; neither the event nor the element
triggering the event NEED to be passed.
I use Keith Gaughan's EventManager.

'tmpImg' is a refence to an image element.
'saveItem' is a refence to a function, see below.
To add an event handler: EventManager.Add(tmpImg, "click", saveItem,
false);
Then in the called function:
function saveItem(e){
// get target button
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;
'e' is the event object, if it isn't automatically passed in, then it
is set.
'targ' is the element triggering the event.
Paul Gorodyansky wrote:
Ian Collins wrote:

Paul Gorodyansky wrote:
Ian Collins wrote:
>
>>it should be
>>
>>txtField.onfocus=myFunction; <- note no parenthesis.
>>
>>Sorry...
>
>
>
I guess I did try that too some time ago - now I remember that I
made it to work when left just function name as you show now...
>
If I remember correctly, the problem then is with _parameters_ -
how to provide them if I can write just a name of a function?
>
Because most fo the functions do need them, for example
>
onKeyDown='Kbd_OnOff(this, event)'
>
event is always available in an event handler, either as a parameter

it's my point - if we can NOT have any parameters - in the case of
txtField.onfocus=myFunction;

where there are no parameters can be used - then this method of adding
a handler is not good... Am I missing something?

off-topic :) -
Anything else (like an object to use) can be bound to the event target.

Just curious - say I used another method of adding a handler -
one that lets me use parameters (like outerHTML) and I sent (event) -
how them can I get "object to use"?
That is, are you saying that instead of
<textarea onKeyDown='Kbd_OnOff(this, event)' ...
I can use
<textarea onKeyDown='Kbd_OnOff(event)' ...
i.e. without 'this' as a parameter
and then somehow get a hold of that textarea object from inside
that function without such parameter?

--
Paul
Oct 6 '06 #27

P: n/a
GLC wrote:
>
For dynamically added event handlers; neither the event nor the element
triggering the event NEED to be passed.
...
if (!e) var e = window.event;
^^^^^^^^^^^^
and

Ian Collins wrote:
>
event is always available in an event handler, either as a parameter
(newer browsers) or window.event (IE).
So is your (Keith's) solution "IE-only"?

--
Paul
Oct 6 '06 #28

P: n/a
GLC
No, it is not IE only.
e is passed in as a parameter for non-IE browsers.
That line checks if e exists before using the IE only windows.event.
On Oct 6, 3:34 pm, Paul Gorodyansky <paul...@compuserve.comwrote:
GLC wrote:
For dynamically added event handlers; neither the event nor the element
triggering the event NEED to be passed.
...
if (!e) var e = window.event; ^^^^^^^^^^^^
and

Ian Collins wrote:
event is always available in an event handler, either as a parameter
(newer browsers) or window.event (IE).So is your (Keith's) solution "IE-only"?

--
Paul
Oct 6 '06 #29

P: n/a
GLC wrote:
>
No, it is not IE only.
e is passed in as a parameter for non-IE browsers.
That line checks if e exists before using the IE only windows.event.

Then it's a contradiction where it's a MUST to have parameter or not:
e is passed in as a parameter for non-IE browsers.
and
For dynamically added event handlers; neither the event nor the element
triggering the event NEED to be passed.
?

--
Paul
Oct 6 '06 #30

P: n/a
GLC
I apologize for my incoherent blabber.
I meant that the event object does not have to be specified or passed
in.
But, you are correct that the function definition must include a
parameter to receive the event if it IS passed in, which is the case
with non-IE browsers.
Thus, in my example where I am using a function reference to attach an
event handler, I am not including a parameter, because one cannot be
used for function references; and yet, the function definition does
have a parameter, which may or may not be used depending on the
browser.

Event handling and asynchronous function calls are so easy to
understand, I am surprise we are even having this discusion. ;-) j/k
On Oct 6, 4:13 pm, Paul Gorodyansky <paul...@compuserve.comwrote:
GLC wrote:
No, it is not IE only.
e is passed in as a parameter for non-IE browsers.
That line checks if e exists before using the IE only windows.event.Then it's a contradiction where it's a MUST to have parameter or not:
e is passed in as a parameter for non-IE browsers.and
For dynamically added event handlers; neither the event nor the element
triggering the event NEED to be passed.?

--
Paul
Oct 6 '06 #31

P: n/a
GLC wrote:
>
I apologize for my incoherent blabber.
I meant that the event object does not have to be specified or passed
in.
But, you are correct that the function definition must include a
parameter to receive the event if it IS passed in, which is the case
with non-IE browsers.
Thus, in my example where I am using a function reference to attach an
event handler, I am not including a parameter, because one cannot be
used for function references; and yet, the function definition does
have a parameter, which may or may not be used depending on the
browser.

You mean, non-IE browsers would not midn the following?

1) No parameter (can not be)

txtControl.onclick=myFunction;

2) There is a parameter and my function magically knows that it's
event
function myFunction(evt) {...}

Right?

Aslo, Keith never wrote a demo/explanation for his package so I still
don't get how to obtain an object where the even handler is working
if there is no 'this' parameter.

--
Thanks,
Paul
Oct 6 '06 #32

P: n/a

Just to clarify - the discussion is now around the fact that
one can add an evenhandler (we are talking cross-browser, not jsut iE)
by

txtControl.onfocus=myFunction;

but only with _that_ syntax, i.e. NO parameters.

It then contradicts with your (unless I am missing something) phrase
about non-IE browsers _passing_ the parameter:
But, you are correct that the function definition must include a
parameter to receive the event if it IS passed in, which is the case
with non-IE browsers.
?

--
Paul
Oct 6 '06 #33

P: n/a
Paul Gorodyansky wrote:
>

You mean, non-IE browsers would not mind the following?

1) No parameter (can not be)

txtControl.onclick=myFunction;

2) There is a parameter and my function magically knows that it's
event
function myFunction(evt) {...}

ad not say a variable that sets a color of my button? :)

--
Paul
Oct 6 '06 #34

P: n/a
Paul Gorodyansky wrote:
GLC wrote:
>>I apologize for my incoherent blabber.
I meant that the event object does not have to be specified or passed
in.
But, you are correct that the function definition must include a
parameter to receive the event if it IS passed in, which is the case
with non-IE browsers.
Thus, in my example where I am using a function reference to attach an
event handler, I am not including a parameter, because one cannot be
used for function references; and yet, the function definition does
have a parameter, which may or may not be used depending on the
browser.

You mean, non-IE browsers would not midn the following?

1) No parameter (can not be)

txtControl.onclick=myFunction;
Parameters are irrelevant here, 'myFunction' is the function reference.
2) There is a parameter and my function magically knows that it's
event
function myFunction(evt) {...}
It doesn't magically know, it is passed when then event handler is called.

Modern browsers call event handling callbacks with an event object as
their parameter, IE calls them with window.event as the event object.

--
Ian Collins.
Oct 6 '06 #35

P: n/a
Ian Collins wrote:
>
1) No parameter (can not be)

txtControl.onclick=myFunction;
Parameters are irrelevant here, 'myFunction' is the function reference.
2) There is a parameter and my function magically knows that it's
event
function myFunction(evt) {...}
It doesn't magically know, it is passed when then event handler is called.

Modern browsers call event handling callbacks with an event object as
their parameter, IE calls them with window.event as the event object.
So non-IE browser while looking at that function definition - say
function myF(parA, parB, parC)

ALWAYS assumes that parA is event
and in the 'body' of that function I can use say

if (parA.ctrlKey)
return true;

?

Then it _is_ a magic :) So, always parameter #1? Or it's allowed
to have only one parameter at that's it? And the assumption that
it's event ?

Or you are saying that NO parameters are needed in the function
_definition_ - just

function myF()
{
}

and event is a pre-set, special name that can be used
like this

if (event.ctrlKey)
return true;

?

Presently I have say (event is 2nd parameter)

<textarea .... onkeypress=vkb_changeKey (this, event)

with parameters being set and used like this:

function vkb_changeKey (txtControl, evt)
{
if (evt.ctrlKey)
return true;
}

**********************************

So you guys are saying that it's possible to do the same

by

txtObject.onkeypress=vkb_changeKey;

and use some other methods for getting hold of text Object
(with the lcuk of 'this' as a parameter)
and use some other methods of using event ?
---
Thanks,
Paul
Oct 6 '06 #36

P: n/a
Paul Gorodyansky wrote:
Ian Collins wrote:
>>>1) No parameter (can not be)

txtControl.onclick=myFunction;

Parameters are irrelevant here, 'myFunction' is the function reference.

>>>2) There is a parameter and my function magically knows that it's
event
function myFunction(evt) {...}

It doesn't magically know, it is passed when then event handler is called.

Modern browsers call event handling callbacks with an event object as
their parameter, IE calls them with window.event as the event object.


So non-IE browser while looking at that function definition - say
function myF(parA, parB, parC)

ALWAYS assumes that parA is event
and in the 'body' of that function I can use say

if (parA.ctrlKey)
return true;

?

Then it _is_ a magic :) So, always parameter #1? Or it's allowed
to have only one parameter at that's it? And the assumption that
it's event ?
Do you have a book on JavaScript? If not, I'd recommend David
Flanagan's "JavaScript The Definitive Guide" where all these concepts
are explained.

--
Ian Collins.
Oct 7 '06 #37

P: n/a
Ian Collins wrote:
>
Do you have a book on JavaScript? If not, I'd recommend David
Flanagan's "JavaScript The Definitive Guide" where all these concepts
are explained.
Thanks, I'll do that - before I just used Web materials - thinking,
"if I know how to program in C or C++ then I can program in JavaScript
especailly because it's a _hobby_ (Virtual Keyboard) -
by just looking at Web examples and FAQ".

Kind of worked :)

But it looks like now it's time for learning more deep concepts...
--
Regards,
Paul
Oct 7 '06 #38

P: n/a
Paul Gorodyansky wrote:
Ian Collins wrote:
>>Do you have a book on JavaScript? If not, I'd recommend David
Flanagan's "JavaScript The Definitive Guide" where all these concepts
are explained.


Thanks, I'll do that - before I just used Web materials - thinking,
"if I know how to program in C or C++ then I can program in JavaScript
especailly because it's a _hobby_ (Virtual Keyboard) -
by just looking at Web examples and FAQ".
That (C and C++) is my background as well and it took me a while to
break loose of the shackles imposed by a strongly typed, class
inheritance mindset.
Kind of worked :)

But it looks like now it's time for learning more deep concepts...
In the case of the above book, 590 well written pages of them :)

--
Ian Collins.
Oct 7 '06 #39

P: n/a
Hi,

GLC wrote:
...
To add an event handler: EventManager.Add(tmpImg, "click", saveItem,
false);
Then in the called function:
function saveItem(e){
// get target button
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;
...
Thanks, it works - if it's just a function that I want to have in a new
eventhandler added to object, but I can not figure out what to do
if it's not

<textarea onkeypress=myFunction(this, event)

but several things like (what to do with return ?):
a)
<textarea onkeypress={myFunction(this, event);x=f2(this);return false;}

or

b)
<textarea onkeypress={ return myFunction(this, event); }
--
Regards,
Paul
Oct 10 '06 #40

P: n/a
GLC
In my opinion you should have a new function that combines the three
calls into one:

function myNewFunction(e){
// get event triggerer
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;

myFunction(targ, e); // *** from your example
x=f2(targ); // from your example ***

// since returning false will probably not stop the event from
propagating
// or bubbling up we cancel the event
// - from http://www.quirksmode.org/js/events_order.html
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

Then attach the new function as the keypress event handler.
I am assuming that 'x' is a global variable and that in your 'a'
example it would be attached to more than one textarea element/object.

Paul Gorodyansky wrote:
Hi,

GLC wrote:
...
To add an event handler: EventManager.Add(tmpImg, "click", saveItem,
false);
Then in the called function:
function saveItem(e){
// get target button
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;
...

Thanks, it works - if it's just a function that I want to have in a new
eventhandler added to object, but I can not figure out what to do
if it's not

<textarea onkeypress=myFunction(this, event)

but several things like (what to do with return ?):
a)
<textarea onkeypress={myFunction(this, event);x=f2(this);return false;}

or

b)
<textarea onkeypress={ return myFunction(this, event); }
--
Regards,
Paul
Oct 10 '06 #41

P: n/a
Hi,

GLC wrote:
>
I am assuming that 'x' is a global variable and that in your 'a'
example it would be attached to more than one textarea element/object.
Right.
In my opinion you should have a new function that combines the three
calls into one:
Good idea, thanks!

So the only thing remains unclear to me - what to do with the things
(by Martin Honnen -
http://www.faqts.com/knowledge_base/view.phtml/aid/1661 )

where a function could return either true or false
and _it matters_ - how to have return working?

(1)
onkeypress="return changeKey(this, event);">

or often there is a series of functions and then - return
statement (especially, if it's HREF simulation a button -
return false; prevents going to an URL):

Even if I combine all functions into one - what to do with
return ?

(2)
onkeypress="fCombined(e); return false;">


--
Regards,
Paul
Oct 10 '06 #42

P: n/a
GLC
The whole point of returning a false is to stop the event from
"bubbling up"
So when you capture a keypress, and change what is being inserted, it
does not go ahead and insert the keypressed also.
For instance:
A textarea with an event handler has focus.
The user presses the 'a' key.
The event gets fired, captures the 'a' and the function inserts 'A'
into the textarea.
Then the event "bubbles up" and the browser inserts 'a' into the
textarea.

To prevent this senario, the event must be cancelled.
We have already accomlished what we wanted and no other handling needs
to occur, not even on the part of the browser.
So these lines are added, instead of returning false:
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE
Or, skip the lines if the event is to continue propagating, like
returning true.

Paul Gorodyansky wrote:
Hi,

GLC wrote:

I am assuming that 'x' is a global variable and that in your 'a'
example it would be attached to more than one textarea element/object.

Right.
In my opinion you should have a new function that combines the three
calls into one:

Good idea, thanks!

So the only thing remains unclear to me - what to do with the things
(by Martin Honnen -
http://www.faqts.com/knowledge_base/view.phtml/aid/1661 )

where a function could return either true or false
and _it matters_ - how to have return working?

(1)
onkeypress="return changeKey(this, event);">

or often there is a series of functions and then - return
statement (especially, if it's HREF simulation a button -
return false; prevents going to an URL):

Even if I combine all functions into one - what to do with
return ?

(2)
onkeypress="fCombined(e); return false;">


--
Regards,
Paul
Oct 10 '06 #43

P: n/a
GLC wrote:
...
We have already accomlished what we wanted and no other handling needs
to occur, not even on the part of the browser.
So these lines are added, instead of returning false:
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE
Or, skip the lines if the event is to continue propagating, like
returning true.

Thanks, I've almost reached the same conslusion - meaning that
the true and false from onkeypress={return foo()} from
http://www.faqts.com/knowledge_base/view.phtml/aid/1661

is the same as - from within the function -
let event to bubble (= true from FAQ) and
cancel bubbling (= false from FAQ)

Why I was confused at first after you showed me
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE
is because in http://www.faqts.com/knowledge_base/view.phtml/aid/1661
they also used things like preventDefault while returning false

if (keyCheck.cancelKey) // cancelKey is an internal object member
{
if (evt.preventDefault)
evt.preventDefault();
return false;

What I mean is that I thought that evt.preventDefault is kind of
what you call "stop even bubbling" - so then why the FAQ example -
IN ADDITION - makes it to work as {return false}
if the event is already stopped?
But - from your example - looks like evt.preventDefault is different
from e.cancelBubble/e.stopPropagation()

Right?

--
Regards,
Paul
Oct 10 '06 #44

P: n/a
Hi,

Does not work in IE (OK in Firefox and Opera):

GLC wrote:
>
The whole point of returning a false is to stop the event from
"bubbling up"
So when you capture a keypress, and change what is being inserted, it
does not go ahead and insert the keypressed also.
For instance:
A textarea with an event handler has focus.
The user presses the 'a' key.
The event gets fired, captures the 'a' and the function inserts 'A'
into the textarea.
Then the event "bubbles up" and the browser inserts 'a' into the
textarea.

To prevent this senario, the event must be cancelled.
If I want to insert "xy" instead of pressed letter 'a'
("ae" instead of German 'a-umlaut' in FAQ's example):

1) in the case of return false in
<textarea onkeypress={ return checkKey(); }

works fine, that is, no 'a' appears on screen, but 'xy' does appear:

in changeKey()
....
if (keyCheck.cancelKey)
{
return false;
}
where keyCheck object is instantiated here, in fnIE():

- find that 'a' should produce 'xy' - newString
- insertAtCaret(txtControl, newString);
return { cancelKey: true }; // want to cancel the appearance of
'a'

and insertAtCaret()
{
var caretPos = textElement.caretPos;
caretPos.text = newText;
caretPos.select();
}

///////////////////////////////////

So the above works as desired.

2)
Now when I want to prevent 'a' to appear in your way -
-

var e = window.event;
e.cancelBubble = true; // IE specific

it does not work.

I've inserted it here:

if (keyCheck.cancelKey)
{
var e = window.event;
e.cancelBubble = true; // IE specific

return false;
}
It does not work - I see first "xy" on screen but then 'a' appears
there, too!

I tried to place
e.cancelBubble = true; // IE specific
_before_ calling insertAtCaret() in fnIE() but it did not help.

:(

//////////////////////////////////////

There is no such problem with your approach if it's _one_ symbol to
be placed - because then the FAQ's code uses - for IE -
just straightforward _replacement_ -
window.event.keyCode = keyCheck.newKeyCode

and your code works fine instead of {return changeKey();}

Looks like replacement is different from preventing the key pressed
to appear and inserting an arbitrary string instead...
--
Regards,
Paul
Oct 11 '06 #45

P: n/a
GLC wrote:
The whole point of returning a false is to stop the event from
"bubbling up"
Please reply below a trimmed quote of what you are replying too.
Statements made out of context leave others to guess at what you might
be referring to.

Also, please learn to quote properly so that others can see who said
what.

Your statement, taken at face value, is wrong. Returning false from an
event handler has no effect on event propagation (sometimes called
"bubbling").
>
So when you capture a keypress, and change what is being inserted, it
does not go ahead and insert the keypressed also.
For instance:
A textarea with an event handler has focus.
The user presses the 'a' key.
The event gets fired, captures the 'a' and the function inserts 'A'
into the textarea.
Then the event "bubbles up" and the browser inserts 'a' into the
textarea.
That is not what the term bubbling, when used with events, referrs to.
Event bubbling relates to event propagation up the DOM node tree, so
that an event from one element bubbles up to higher nodes in the tree.

Returning false from an event *does not* prevent bubbling.
>
To prevent this senario, the event must be cancelled.
We have already accomlished what we wanted and no other handling needs
to occur, not even on the part of the browser.
So these lines are added, instead of returning false:
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE
Or, skip the lines if the event is to continue propagating, like
returning true.
Returning true or false is irrelevant for event propagation, you are
thinking of preventDefault:

W3C DOM Events Specification: Prevent default
<URL:
http://www.w3.org/TR/DOM-Level-2-Eve...preventDefault
>
W3C DOM Events Specification: stop propagation
<URL:
http://www.w3.org/TR/DOM-Level-2-Eve...topPropagation
>

--
Rob

Oct 11 '06 #46

P: n/a
GLC
Yep, sorry. Somebody passed along some bad info.
Garbage in, garbage out ;-)
After the e.cancelBubble line, add this:

e.preventDefault? e.preventDefault() : e.returnValue = false;

I tested this on IE6 and Firefox

Paul Gorodyansky wrote:
Hi,

Does not work in IE (OK in Firefox and Opera):

GLC wrote:

The whole point of returning a false is to stop the event from
"bubbling up"
So when you capture a keypress, and change what is being inserted, it
does not go ahead and insert the keypressed also.
For instance:
A textarea with an event handler has focus.
The user presses the 'a' key.
The event gets fired, captures the 'a' and the function inserts 'A'
into the textarea.
Then the event "bubbles up" and the browser inserts 'a' into the
textarea.

To prevent this senario, the event must be cancelled.

If I want to insert "xy" instead of pressed letter 'a'
("ae" instead of German 'a-umlaut' in FAQ's example):

1) in the case of return false in
<textarea onkeypress={ return checkKey(); }

works fine, that is, no 'a' appears on screen, but 'xy' does appear:

in changeKey()
...
if (keyCheck.cancelKey)
{
return false;
}
where keyCheck object is instantiated here, in fnIE():

- find that 'a' should produce 'xy' - newString
- insertAtCaret(txtControl, newString);
return { cancelKey: true }; // want to cancel the appearance of
'a'

and insertAtCaret()
{
var caretPos = textElement.caretPos;
caretPos.text = newText;
caretPos.select();
}

///////////////////////////////////

So the above works as desired.

2)
Now when I want to prevent 'a' to appear in your way -
-

var e = window.event;
e.cancelBubble = true; // IE specific

it does not work.

I've inserted it here:

if (keyCheck.cancelKey)
{
var e = window.event;
e.cancelBubble = true; // IE specific

return false;
}
It does not work - I see first "xy" on screen but then 'a' appears
there, too!

I tried to place
e.cancelBubble = true; // IE specific
_before_ calling insertAtCaret() in fnIE() but it did not help.

:(

//////////////////////////////////////

There is no such problem with your approach if it's _one_ symbol to
be placed - because then the FAQ's code uses - for IE -
just straightforward _replacement_ -
window.event.keyCode = keyCheck.newKeyCode

and your code works fine instead of {return changeKey();}

Looks like replacement is different from preventing the key pressed
to appear and inserting an arbitrary string instead...
--
Regards,
Paul
Oct 11 '06 #47

P: n/a

Paul Gorodyansky wrote:
GLC wrote:
...
We have already accomlished what we wanted and no other handling needs
to occur, not even on the part of the browser.
So these lines are added, instead of returning false:
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE
Or, skip the lines if the event is to continue propagating, like
returning true.


Thanks, I've almost reached the same conslusion - meaning that
the true and false from onkeypress={return foo()} from
http://www.faqts.com/knowledge_base/view.phtml/aid/1661

is the same as - from within the function -
let event to bubble (= true from FAQ) and
cancel bubbling (= false from FAQ)
Returning true or false to the event handler has no effect on event
propagation.
>
Why I was confused at first after you showed me
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE

is because in http://www.faqts.com/knowledge_base/view.phtml/aid/1661
they also used things like preventDefault while returning false

if (keyCheck.cancelKey) // cancelKey is an internal object member
{
if (evt.preventDefault)
evt.preventDefault();
return false;

What I mean is that I thought that evt.preventDefault is kind of
what you call "stop even bubbling" - so then why the FAQ example -
IN ADDITION - makes it to work as {return false}
if the event is already stopped?
The above code could be more clearly written as:

if (evt.preventDefault) {
evt.preventDefault();
}
return false;

In other words, if preventDefault is a supported method of the event
object, call it. Then return false - which will have the same effect as
preventDefault in IE and similar browsers. For browsers like Firefox
that support both, it is like callling preventDefault twice. A more
strict version is:

if (evt.preventDefault) {
evt.preventDefault();
} else {
return false;
}

None of the above has any effect on event propagation (bubbling).
>

But - from your example - looks like evt.preventDefault is different
from e.cancelBubble/e.stopPropagation()
Yes, see my other post for links.

Neither "return false" or preventDefault stop propagation, only
cancelBubble (IE) and stopPropagation (W3C) can do that (which is why
the W3C created two methods: preventDefault and stopPropagation).

Most code doesn't bother with preventDefault, it just returns false
because it works in the majority of browsers. That's an observation,
not a suggestion or recommendation.
--
Rob

Oct 11 '06 #48

P: n/a
GLC
I tried cancelBubble alone and it did NOT stop propagation in IE6
Neither did returning false. I specifically has to set returnValue =
false.

RobG wrote:
Paul Gorodyansky wrote:
GLC wrote:
...
We have already accomlished what we wanted and no other handling needs
to occur, not even on the part of the browser.
So these lines are added, instead of returning false:
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE
Or, skip the lines if the event is to continue propagating, like
returning true.

Thanks, I've almost reached the same conslusion - meaning that
the true and false from onkeypress={return foo()} from
http://www.faqts.com/knowledge_base/view.phtml/aid/1661

is the same as - from within the function -
let event to bubble (= true from FAQ) and
cancel bubbling (= false from FAQ)

Returning true or false to the event handler has no effect on event
propagation.

Why I was confused at first after you showed me
e.cancelBubble = true; // IE specific
if (e.stopPropagation) e.stopPropagation(); // won't work on IE
is because in http://www.faqts.com/knowledge_base/view.phtml/aid/1661
they also used things like preventDefault while returning false

if (keyCheck.cancelKey) // cancelKey is an internal object member
{
if (evt.preventDefault)
evt.preventDefault();
return false;

What I mean is that I thought that evt.preventDefault is kind of
what you call "stop even bubbling" - so then why the FAQ example -
IN ADDITION - makes it to work as {return false}
if the event is already stopped?

The above code could be more clearly written as:

if (evt.preventDefault) {
evt.preventDefault();
}
return false;

In other words, if preventDefault is a supported method of the event
object, call it. Then return false - which will have the same effect as
preventDefault in IE and similar browsers. For browsers like Firefox
that support both, it is like callling preventDefault twice. A more
strict version is:

if (evt.preventDefault) {
evt.preventDefault();
} else {
return false;
}

None of the above has any effect on event propagation (bubbling).


But - from your example - looks like evt.preventDefault is different
from e.cancelBubble/e.stopPropagation()

Yes, see my other post for links.

Neither "return false" or preventDefault stop propagation, only
cancelBubble (IE) and stopPropagation (W3C) can do that (which is why
the W3C created two methods: preventDefault and stopPropagation).

Most code doesn't bother with preventDefault, it just returns false
because it works in the majority of browsers. That's an observation,
not a suggestion or recommendation.
--
Rob
Oct 11 '06 #49

P: n/a
GLC wrote:
I tried cancelBubble alone and it did NOT stop propagation in IE6
Neither did returning false. I specifically has to set returnValue =
false.
Please reqly below a trimmed quote of what you are replying too. I
have no idea how you attempted to use cancelBubble, if you are correct
(which I doubt) you have discovered a bug in IE that has survived
otherwise undetected for many, many years.

MSDN documentation on cancelBubble:
<URL:
http://msdn.microsoft.com/workshop/a...ncelbubble.asp
>

However, I suspect cancelBubble works as designed and that the problem
is in your code. Try this example:

<script type="text/javascript">
function stopProp(e){
// Cancel bubbling in IE
e.cancelBubble = true;
// Stop propagation in W3C browsers
if (e.stopPropagation) e.stopPropagation();
}
</script>

<div style="border:1px solid red; width: 20em;"
onclick="alert('Click received by div A');">Div A<br>
<button>A click on this button will bubble up to Div A</button>
<button onclick="stopProp(event);">A click on this button
will not bubble up to Div A</button>
</div>
--
Rob

Oct 11 '06 #50

51 Replies

This discussion thread is closed

Replies have been disabled for this discussion.