9

I'm working on a screen reader project and I needed to get the paragraph under the cursor. To do that in Firefox, I wrote an extension, to which my screen reader connects through sockets and gets the text. I needed to get the current element under the cursor and the function worked fine in a sample html page written by myself (So there is no problem with the function).

But when I try to attach the function to my JS file in the extension, It seems that the function which is called by "document.body.addEventListener('mouseover',myfunc(mEvent),false);" is never called. But if I call 

document.body.addEventListener('mouseover',function(mEvent){...},true);

myfunc is called.

I'm new to javascript, so excuse me if it's a stupid question, But why the

document.body.addEventListener('mouseover',function(mEvent){...},true);

is not working?

I always appreciated your nice helps and ideas. :)

Luke
  • 193
  • 2
  • 3
  • 12

6 Answers6

2

There may be other issues here, but the syntax of your addEventListener call is incorrect and could be causing the issue you are seeing:

document.body.addEventListener('mouseover',myfunc(mEvent),false); is actually invoking "myfunc" at the same time you are invoking addEventListener and passing it as the second parameter.

You should instead be calling it this way:

document.body.addEventListener('mouseover',function() { myfunc(mEvent) },false);

  • Thanks Matt, but to be accurate, I called addEventListener like this in my project: document.body.addEventListener('mouseover', function(mEvent){...},false); Is it wrong? (Sorry for being inaccurate and unclear in the question) – Luke Aug 23 '11 at 22:21
  • 1
    OK, that's correct then - I recommend correcting it in your question just to clarify. –  Aug 23 '11 at 22:33
  • @Luke: I suggest you try again - with your correction the question is very confusing now. I think you changed the wrong code line. – Wladimir Palant Aug 24 '11 at 05:29
2

While this isn't a direct answer to your question, I hope that it is helpful nevertheless. Using an extension for a screen reader is unnecessary, in particular you might not want to update that extension regularly as the browser's user interface changes. Firefox supports a number of accessibility APIs which you can use directly from your application. These APIs have the advantage of being stable, once your implementation is done it should continue working (as far as I remember there was only one occasion where Mozilla broke compatibility with existing screen readers).

As to the actual question: you didn't tell anything about the context in which this code is executing. Normally, extensions run code in their XUL overlay meaning that the context is the browser window, not the web page. Which would explain why your code isn't working (it's a XUL document, no document.body there). What you probably mean is attaching an event listener to the <tabbrowser> element where the web pages are loaded: gBrowser.addEventListener(...). Side-note: If you really wanted to catch all events on a XUL document you should register an event listener on document or document.documentElement.

Btw, you can see error messages related to extensions in the Error Console (the article I link to explains how to enable it in the current Firefox versions).

Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
  • Many good things to learn from your scientific answer. But for the screen reader, I had to use ISimpleDOMNode.idl and my code is in c#, and it has some problems as mentioned in the [link](http://stackoverflow.com/questions/4642081/problem-convert-idl-to-tlb). After many searching, I found that a solution is to use extensions and sockets. But now I think it's the time to add wrappers and using ISimpleDOMNode.idl! Many special thanks for your nice and valuable reply. I try to keep them in my mind. :) – Luke Aug 24 '11 at 08:42
2

Add height to a body element.

<html>
<style>
    .vh {
        height: 100vh;
    }
</style>
<body class="vh">
    <script>
        document.body.addEventListener('click', () => {
            console.log('mouse click');
        });
    </script>
</body>
</html>
Juzbird
  • 41
  • 3
0

I also had the same problem and now solved it. After closing tag, try adding an document.body.addEventListener. Parser didn't recognize DOM object of the "addEventListener" event because HTML tag of DOM object is not closed.

Refer to following. It works well.

<html>
    <body>
    ...
    </body>

    <script type="text/javascript">
        document.body.addEventListener('click', function() { ... });
    </script>
</html>
Markus Hedlund
  • 23,374
  • 22
  • 80
  • 109
user2347127
  • 9
  • 1
0

following Wladimir Palant's advise, the follow is working:

document.addEventListener('click', function() { ... }, false);
Hocker Fun
  • 1
  • 1
0

I suspect that the document is not yet ready, so there is nothing to bind to. Try adding an onload="addMyEventListener();" to your <body> and see if that fixes things up. I don't know the proper way to time things, so maybe someone else can chime in with the best way to handle this.

mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • I guess you're right (to my limited knowledge of JavaScript, It seems correct). But I'm writing an extension, so I don't have the . But I think as you said the document is not yet ready when I call the function. – Luke Aug 23 '11 at 22:27
  • I am on the train so cannot look it up for you. Do a search on mimicking jquery's document.ready. That is what you want to do 8I think. – mrtsherman Aug 23 '11 at 22:39