document.body.addEventListener is not working_问答_开发者

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 开发者_StackOverflow中文版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. :)

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

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);

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>

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.

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

document.addEventListener('click', function() { ... }, false);

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>