469,282 Members | 2,025 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,282 developers. It's quick & easy.

Key events in invisible (by -Moz-Opacity) div (Mozilla)


Hello,

I cannot succeed in getting any key event on a div that's been set
invisible by the style's MozOpacity property under firefox. I'm using
this method so that I can capture the mouse events. Unfortunately, it
appears to do so only with mouse events, not key events.

Is there a better solution than the following? :
-----------------------------
<html>
<head>
<title>Event test..</title>
</head>
<body>

<div style="border: 3px solid green;">
<div id="foo">
</div>
</div>

<script>
var foo = document.getElementById ("foo");
foo.style.MozOpacity = 0;
foo.style.filter = "alpha(opacity=0)";
foo.style.backgroundColor = "red";
foo.style.width = "100%";
foo.style.height = "100px";
foo.onmouseover = function () {alert ('over');};
foo.onmouseout = function () {alert ('out');};
foo.onkeydown = function () {alert ('down');};
</script>
</body>
</html>
-----------------------------

As you'll notice, the mouse events will be fired, but not the key*
events.
Note: The code works under IE (I can reach the same effect as the
'MozOpacity' property by the 'filter' property)

Many thanks for any advice!

Best regards,
Arnaud
--
Arnaud DIEDEREN
Software Developer
IONIC Software
Rue de Wallonie, 18 - 4460 Grace-Hollogne - Belgium
Tel: +32.4.3640364 - Fax: +32.4.2534737
mailto:ad@ionicsoft.com
http://www.ionicsoft.com
Aug 1 '06 #1
2 3090
Arnaud Diederen (aundro) wrote:
Hello,

I cannot succeed in getting any key event on a div that's been
set invisible by the style's MozOpacity property under firefox. ...
<snip>
<html>
<head>
<title>Event test..</title>
</head>
<body>

<div style="border: 3px solid green;">
<div id="foo">
</div>
</div>

<script>
<snip>
</script>
</body>
</html>
-----------------------------

As you'll notice, the mouse events will be fired, but not the key*
events.
<snip>

There is nothing in this page that can have the keyboard focus so how
do you expect it to capture key events at all? But in any event, the
bubbling of key events would be from children to their parent, and so
on up, so only events originating with descendants of your invisible
DIV could be captured by it, and they would presumably be hidden
themselves.

Richard.

Aug 1 '06 #2


Arnaud Diederen (aundro) wrote:

I cannot succeed in getting any key event on a div that's been set
invisible by the style's MozOpacity property under firefox. I'm using
this method so that I can capture the mouse events. Unfortunately, it
appears to do so only with mouse events, not key events.
<div id="foo">
</div>
var foo = document.getElementById ("foo");
foo.style.MozOpacity = 0;
foo.onkeydown = function () {alert ('down');};
I don't think Mozilla fires any key events on div elements, whether you
apply any CSS opacity or not. You would need to have a child or
descendant element inside of the div that can receive key events (e.g.
<input type="text"or <textarea>), then that event might bubble up to
the div if someone types in a text control and can be handled in the
div's key event handler.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Aug 1 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Joseph Misko | last post: by
5 posts views Thread by Harry Gould | last post: by
1 post views Thread by John Smith | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.