Geek Answers Handbook

How to switch the target of a browser event

I have a three-dimensional scene based on three.js that occupies the entire window.

I have angular loads an html overlay that occupies a 20% wide column on the right side.

I use something similar to find out where the event occurred - Javascript event handler on body but not on input

Now the problem is that I click the checkbox on the html overlay. Any future keyboard event (for example, w, a, s, d to move the camera in my 3D scene) has a value of target =.

Even if I click on a 3D scene and fire a keyboard event, the input of the target.

I need to remove the html overlay, and then all future keyboard events will have the target body.

How do I let the user switch the event target without removing the html overlay?

+4
source share
1 answer

The target will be set to the currently focused item. All you have to do is make sure you check the box after you click on it. You can write an extremely simple directive for this. For example:

app.directive("noFocus", function() {
  return function(scope, element) {
    element.find("input").on("focus", function(ev) {
      ev.target.blur();
    });
  };
});

Then you can use it on your html overlay:

 <div no-focus>
          Things inside here should lose focus immediately.

          Click Here: <input type="checkbox" />
          <p>
          After clicking on the checkbox it should still log the body as the target on keypresses.  
          </p>


    </div>

Here is plunkr so you can see it in action, try clicking on this checkbox, and then typing:

http://plnkr.co/edit/mzxjdBKfz59Ec0R9oq1K?p=preview

" ", . " ", <body>, .

+1

More articles:


All Articles