title: How to disable some element reaction to any mouse event without interrupting underlaying element events in jQuery?
body: <p>I'm trying to make a simple pop-up <code>&lt;div&gt;</code> that's designed to show mouse coordinates while a user is dragging a mouse pointer. This pop-up appears at the bottom on the right to the mouse pointer. The <em>underlaying</em> <code>div</code> has its own very important mouse event handlers (e.g. <code>.mousemove()</code>). The pop-up <code>div</code> is quite far away from the mouse pointer (about 16 pixels downwards and 16 pixels to the right). Let's say, a user is resizing some object, and that pop-up is displaying a new size of that object. This is o.k. if the user is resizing the object slowly. But as soon as the user abruptly resizes the object and points the pop-up <code>div</code>, the underlaying <code>div</code> loses focus, and its event handler, that's responsible for resizing, gets "broken" (it's like the mouse pointer "forgets" the underlying <code>div</code>) because it's not designed to cooperate with overlaying <code>div</code>-s at all.</p>
  
  <p>Is there any ability to suppress any pop-up <code>div</code> mouse events allowing the underlaying <code>div</code> events go <em>strictly continuously</em>?</p>
  
  <p>I tried something like that:</p>
  
  <pre><code>var BLACK_HOLE = function(e) {
      e.preventDefault();
      e.stopPropagation();
      return false;       
  };
  $popUp
      .click(BLACK_HOLE)
      .dblclick(BLACK_HOLE)
      .focusin(BLACK_HOLE)
      .focusout(BLACK_HOLE)
      .hover(BLACK_HOLE)
      .mousedown(BLACK_HOLE)
      .mouseenter(BLACK_HOLE)
      .mouseleave(BLACK_HOLE)
      .mousemove(BLACK_HOLE)
      .mouseout(BLACK_HOLE)
      .mouseover(BLACK_HOLE)
      .mouseup(BLACK_HOLE);
  </code></pre>
  
  <p>It doesn't work the way I need. Did anyone get the same issue? Is it possible to bypass it? Perhaps, there's a complete jQuery plugin for that... Confused...</p>
  
  <p>Thank you in advance.</p>