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?
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.
Related
I'm using Highmaps to show a simple map and over it I have another div with a component that draws things on top of the map (this has to be done this way, I cannot draw everything inside Highmaps, unfortunely).
Now I would like to have some interation with the map, although it is below my div. I would like to know if there is a way to trigger the click, hover, etc. events on the map when I click on the div on top of it.
I have searched Highmaps docs trying to find a method a-like trigger(ev, x, y) but there seems to be none. Then I tried a pure javascript solution using MouseEvent() and dispatchEvent() on the Map DOM, but it also didn't work.
I have set up a simple fiddle with what I want to work: http://jsfiddle.net/k11yfz58/1/
If we coment the #overlay div, we get an alert when we click in a state. I want the same behavior but clicking on the overlay div, is that possible?
Thanks!
EDIT
It was suggested to use the pointer-events CSS property for this. That does not solve my problem because I also need the events to be triggered on the #overlay div.
You can add this to your css:
#overlay {
pointer-events: none;
}
From MDN:
The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.
and the none value:
none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
What this means is that your overlay element is "invisible" to mouse events, and thus mouse events occur on the div below.
I need to simulate a dragging effect, basically when an user click and kept hold the mouse on a DIV, it should be re-positioned accordingly to mouse coordinates (following the mouse).
This script works fine:
http://jsbin.com/vurumupoqu/1/
Except when a user click and hold very near the edge of the DIV and move FAST and far away the mouse outside the DIV, in this case is not being dragged at all.
I have tried several option with mouseleave and mouseout with not success.
I need the DIV being dragged even if the user move fast the mouse when key is hold anywhere on the page.
I would like to know:
How to fix this issue? (I meanly target latest Chrome and Firefix).
Could be a better option using HTML5 drag? If yes why?
Bind the mousemove event handler to document instead of the element itself:
document.addEventListener('mousemove', function (event) {
console.log('+ mousemove')
this.logicDrag();
}.bind(this));
http://jsbin.com/deyiwaqeqa/2/
Explanation
A mousemove event is not triggered for every pixel when you move the mouse around. This means that the mouse might have left #target - before #target has been moved to match the new mouse position.
I've accomplish successfully when the mouse overs a div to cycle and change the background-image and stop the other divs from cycle.
What happens is that, this div have a title which appears when the mouse is hovering the div, and if I grab the cursor and put it over the title and then move the cursor again to the other div title, the cycle continues in both divs, and I would like not to.
I'm clearing the interval cycle this way: clearInterval(theInterval);
But, somehow, when the title is being hovered it doesn't stop the others cycle.
The problem can be seen in JSFiddle.
Simulate the problem:
Put your cursor over the title
Move your cursor quickly to the other div title
You'll see that both divs continue the cycle independently (and I want only one to cycle)
Simulate how it works:
Put your cursor over the div (without being in the title)
Move your cursor to the other div
You'll see that only one div cycles
I believe it's a problem with the nature of the mouseover event, and the divs being in such close proximity. Try using the hover event instead. See this fiddle
In essence:
$('.collection-photo').hover(function(){
// mouse over stuff here
}, function() {
// mouse out stuff here
});
Ive got a problem here.
I want to make elements transfer their dragged event.
This means, I want to start dragging one element - and if this element reaches a point ( for example, left: 300 ) I want to hide the first element. Then I want to add a second element to the same drag event, for example an other div. So the drag will look like a single drag for the user but change its elements.
This should happen in one drag.
Anyone knows how I can make this?
An approach would be to use the drag event documented here:
http://jqueryui.com/draggable/#events
in the drag event check the left and top values and change the HTML of your helper element based on the left and top values of your drag event.
HTH
I am trying to create a firebug type rollover element selector, but seem to be having problems with the rollover triggering parent elements that contain my target element.
See the following example:
http://jsbin.com/elofe3/edit
There are 3 divs on the page, all with mouseenter/mouseleave listeners, the largest is totally independent of theother two, the second largest is position ontop of the largest but is not contained within it, and the sallest is nested within the second largest, (it's parent). It may be easier to visualise if you look at the source.
If you click preview and roll you mouse over the central div, you will notice that the second largest div also continues to respond to the mouseenter event and remains outlined in red. To fix this, I tried to add $(this).parent().trigger("mouseout"); on each rollover listener.
http://jsbin.com/elofe3/4/edit
But them when your mouse leaves the smallest (pink) div, to the middle (black) div, the middle div does not fire (presumably because mouseenter/mouseover is not being fired as the mouse has never actually left the central div.
I understand that in this situation I could just add $(this).parent().trigger("mouseover"); to the mouseleave listener on each div, but it would'nt work in evey example, (for instance, a div nested within its parent, but is positioned outside of that parent on the page.)
I require some novel solution to this, it needs to work very similarly to the firebug, element selector (the tool that lets you rollover elements on the page (higlighting them) and click to select them and triggering it to show the source for that element).
Any help greatly appreciated.
This is how mouseenter and mouseleave work. But you are mislead, mouseenter is not triggered on the parent element. Instead, mouseleave is not triggered if you hover over descendants. So it is not that the border is added again, but that it is never removed.
Add the event handlers to mouseover and mouseout and prevent the event from bubbling up:
$("div").mouseover(function(e) {
e.stopPropagation();
$(this).css("outline", "solid 3px red");
});
$("div").mouseout(function(e) {
e.stopPropagation();
$(this).css("outline", "none");
});
http://jsbin.com/elofe3/5/edit