CODEWITHSUNDEEP
javascriptevents
hguser
hguser

Reputation: 36028

how to stop the event bubble

In have two div in the page,the outer and the inner.

I bind the mousemove event to the outer div,when user mousemove in the outer div,it will show the clientX and clientY of the mouse.

Also I make the inner div dragable,here is the live example.

1) I do not want the outer's mousemove event trigger when I drag the inner div.

Of course I can set the "outer.onmousemove=null" when I drag the inner div,but I do not think it is the best way since the event on the outer div maybe binded by other people.

I try to use the event.cancalBubble,but it seems that it does not work.

2) when I drag the inner div,it will select the text in the firefox,how to stop it?

Upvotes: 1

Views: 3572

Answers (1)

DanneManne
DanneManne

Reputation: 21180

There are two functions that can be called to make sure that the event bubble stops:

event.stopPropagation();
event.preventDefault();

If you make sure to call both of those then it should prevent both the parent div being selected and the text being selected.

Edit:

Looking more closely at your code I see a few problems. The first thing is that you use the onmousemove event for registering the mouse coordinates in the "outer" div. Then you use the documents onmousemove to drag to "inner" div around. That means that if you stop the propagation for the onmousemove event when you start dragging, it will never bubble up to the document node and in turn will result in the draggable div never being dragged untill you actually move the mouse outside the "inner" div area.

One solution is to set the _mouseMove function on the moveable div instead of the document and then stop the propagation like this:

/* Remove this */
//document.onmousemove=_mouseMove;
//document.onmouseup=_mouseUp;

/* Add this */
move_ele.onmousemove=_mouseMove;
move_ele.onmouseup=_mouseUp;
e.stopPropagation();
e.preventDefault();

This will make it work like you mention except when you drag so fast that the cursor leaves the "inner" div area, then it will stop dragging untill the cursor enters the div area again.

Another solution is to handle it all in the "outer" divs onmousemove event to see if the mouse is actually moving over that div and not the "inner" like this:

out.onmousemove=function(e){
    /* Check to see if the target is the "outer" div */
    if(e.target == this){
        e=e==null?window.event:e;
        note.innerHTML=e.clientX+','+e.clientY;
    }
}

This will also work like you mention but it will also stop the coordinates from being updated as soon as you move the cursor over the inner div even though you have not started dragging.

Upvotes: 4

Related Questions