0

i need a clue how to stop the #bubble flickering as soon as i move the mouse pointer above it, these two elements are placed on each other, the canvas' onMouseMove is obviously interfering with it, i use Chrome for testing.

<p id="bubble" onclick="noBubble();"></p>
<canvas id="kogal" width="450" height="630" onmousedown="onMouseDownkogal(this, event);" onmousemove="onMouseMoveKogal(this, event);" onmouseup="onMouseUpKogal();" onmouseout="onMouseOutKogal();">

is it possible to stop the onMouseMove for the canvas only when the mouse pointer is above the #bubble? i have tried preventDefault and return false in several combinations to no avail, thank you for any tips. ^_^

usagi
  • 1
  • Since the elements are siblings, an event on the `p` element doesn't trigger an event on the `canvas` element and vice versa. If you are over the `p` element, `mousemove` should not be triggered on the `canvas` element. Proof: http://jsfiddle.net/2z2rbzzj/. Or maybe the `p` element is not on top of the `canvas`? – Felix Kling Oct 31 '14 at 15:05
  • Im not qiet sure if i understand ur question but normaly u can stopp the bubbeling effect by writing "return false" or if you are using jquery: event.stopPropagation() – ThunD3eR Oct 31 '14 at 15:45

1 Answers1

0

event.preventDefault() just prevents default event behavior from happening, like a page reload when you submit a form. What you want is event.stopPropagation(), which will prevent an event from bubbling out to container elements.

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation

Raphael Serota
  • 2,157
  • 10
  • 17