i have a page with an object where you can zoom in and out. now i want to find a way to run a special zoom function if the user scrolls and the cursor is over this object at this time.
if the cursor is somewhere else the page should scroll normal but the page should not move if the cursor is over this object.
the problem what i am having now is, there could be an extra function which can detect if the cursor is over the image and save it, but this does not prevent the page from scrolling
You can use mouseover and mouseout or mouseenter and mouseleave events to detect if the cursor is over the image. You could also use the mousewheel event and stop the propagation and prevent the default behaviour.
document.getElementById("noscroll").addEventListener("mousewheel", function (event) {
event.preventDefault();
event.stopPropagation();
}, false);
Related
In my simple application canvas wrapped by hyperlink. Some objects, which are placed on canvas stage have special mouse interaction on click event. Is there any possible solutions to prevent hyperlink jumping by clicking on objects with my mouse click event listeners?
Normally you can just call preventDefault on the generated mouse event, and it will stop the link event from firing.
element.addEventListener("click", function(e) {
e.preventDefault();
}, false);
This is not possible using EaselJS because although you can access the nativeEvent on any EaselJS mouse event, EaselJS doesn't use the "click" event at all (and instead uses a combination of "mousedown" and "mouseup"). So preventing default on a click event will do nothing.
Doesn't work
// You would expect this to work.
myShape.on("click", function(e) {
e.nativeEvent.preventDefault(); // Nothing. This cancels a "mouseup" instead.
});
Workaround
However, you can work around this pretty easily. Set a flag on the clicked item (or wherever you would set it in your application) any time it is clicked.
myShape.addEventListener("click", function(event) {
myShape.clicked = true;
}, false);
Then, listen for the canvas click event yourself, check and check the flag. Make sure to reset it after. This is possible because "click" is always fired after "mouseup"
stage.canvas.addEventListener("click", function(event) {
if (myShape.clicked) { event.preventDefault(); }
myShape.clicked = false;
}, false);
Here is a quick fiddle showing it working. http://jsfiddle.net/buqkvb1u/
We are looking to see if this makes sense to handle in EaselJS. Thanks for your report!
I have a problem with Jquery hover and click on mobile.. Let me explain!
I have square div and, when the mouse is hover it, a new div appear and follow the mouse. You can even click the square div and if so, a new page is opened. The problem now is that, on mobile, I need two click for the new page to be opened, since the first click is read as "hover".
I tried the
$("#mydiv").on('click touchend', function(e)
Actually it works, but with this, if I want to scroll the page on mobile, and I start the swipe on the square div, the new page is opened, which it shouldn't since I didn't click on the square div, just "passed by".
Try using one of those events
https://github.com/benmajor/jQuery-Touch-Events#4-the-events
$('#mydiv').bind('tap', function(e) {
console.log('User tapped #myDiv');
});
As per documentation:
"The event's target is the same element that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element."
You can see the documentation of touchend also:
https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
If you start your scroll with the square div then square div touchend event will be fired after the release of that finger even after you move your finger to the other elements.
To solve this problem, you can use these events:
https://github.com/benmajor/jQuery-Touch-Events#4-the-events
If you want to stick with this touchend event then there is a workaround:
Declare a global variable i.e.
var isScroll = false, timer;
Apply touchmove eventhandler on document which will fired for touch devices only, this handler detect whether the document is getting scrolled if yes set the isScroll flag to true that will false after 500ms:
$(document).on("touchmove", function(e) {
isScroll = true;
if(timer) clearTimeout(timer);
timer = setTimeout(function() {
isScroll = false;
}, 800);
})
and insert if condition in your eventHandler:
$("#mydiv").on('click touchend', function(e) {
if(!isScroll) {
//insert your code here;
}
}
Let's say I have a box/table with multiple rows.. These rows are draggable.
Now I have a JS where I have implemented event handlers for touchstart,touchmove, touchend for the iPad....Basically they just map these events to corresponding mouse events like mouseover, mousedown, mouseup, etc
Now here is my issue;
While I am able to drag any of the rows from the table, I also want to be able to scroll it. When I press any finger on screen and drag down, it does the drag action for that row (since I am using event.preventDefault() for touchmove to prevent the default scrolling region).
Now I understand that I cannot have both the actions (drag/scroll) using a single finger..
So I want to implement/have a scroll action when 2-fingers are used.. (The other case i.e. for single finger, it should do the drag action)
Now I am aware that event.touches.length/event.targetTouches.length gives no of fingers on screen, I am not sure how to use that to do the scrolling action... Just as an FYI, this scrolling would be similar to what we get on the iPad for fixed height div scrolling (overflow:auto), which iPad provides out-of-the-box..
You could fire preventDefault later, and optionally.
Figuring out if you want the custom / drag behavior first.
something like this: ( i have no idea if this exact code will work since i cannot test it right now, this assumes you use jQuery, and i don't know the event properties for the number of fingers but just to give you an idea:)
$('#SomeElement').TouchMove(
function(e)
{
if( /* number of fingers equals one */ )
{
e.preventDefault()
//more element-drag code could go here
return;
}
}
);
I have a link which has mousedown and mouseup handlers to animate some objects on page.
When dragged (drag and drop) link fires mousedown event but it doesn't fire mouseup when released. is there a workaround for this problem?
Here is a example, if you click link normally it works but when you drag the link mouse up doesn't happen:
http://jsfiddle.net/hL3mg/1/
Handling drags
Something crucial nobody mentions here is that there actually is an event to register the end of a drag, which as explained by the other answers is what's happening here. The event is called dragend, so you can simply do
$("a").on("dragend",function(){
console.log("Drag End");
});
To register the end of the drag. The disadvantage of this is that you will still see a drag interface (in other words: the browser will show some UI to notify the user he's draggin).
Registering mouse up's
Note from 2020: This isn't a good answer, but I am not familiar anymore with jQuery, so can't update it well. I would guess that event.preventDefault() on the dragstart might or might not be relevant.
There is however also a way to register the sought after mouse ups, simply cancel the drag behaviour by returning false in the click event listener, and then register the mouseup on the document.
$("a").mousedown(function(){
console.log("Mouse Down");
return false;
});
$(document).mouseup(function(){
console.log("Mouse Up");
});
The only remark that I do feel like I have to make is that in a stand alone jsfiddle this worked perfectly, in my own code it did not, so I am listening for both the mouseup and the dragend just to be sure.
What I did to solve this is associate an "mouseOut" event to every link and check if any link has been pressed. If it did, the mouseOut would fix the positioning of the link. Here's the code:
var mouse_button = false;
$('a')
.mousedown(function(){
$(this).css('top', '+=2');
mouse_button = true;
})
.mouseup(function(){
$(this).css('top', '-=2');
mouse_button = false;
})
.mouseout(function(){
if (mouse_button) {
$(this).css('top', '-=2');
mouse_button = false;
}
});
It seems that the mouseup event won't be fired because your mouse has left the link when you release the left button.
From http://www.quirksmode.org/js/events_mouse.html :
Suppose the user depresses the mouse
button on a link, then moves his mouse
off the link and then releases the
mouse button. Now the link only
registers a mousedown event.
Maybe you can do this to walkaround:
register mousedown event for a link
register mouseup event for the whole document
when the link fire mousedown event , then the document fire mouseup event, you can think that link is firing mouseup event
What you described is by conscious design.
It has always been the intent that if you mouse down on a link, a button, whatever and change your mind before you've mouse up, you can move the cursor off the link or button and then release the mouse button and the action - the link, button, whatever - will not occur.
It is by design that the mouse up is not sent to the object which received the mouse down if the cursor is moved off the item before mouse up.
This is a user interface design consideration. This is why you should program such that it takes a click to initiate just about any action - not just a mouse down.
I grant you that there may be times where you want to take action on a mouse down, such as in dragging, but it is the exception and when done properly, the mouse up will be seen - except in some versions of IE when the mouse up will be lost if you drag the cursor off the page - to the top, left or right.
If you want to move things around and be able to see the mouse up, it is far better to use divisions or such than things like links.
Links are intended to be just that: link to something. Yes, you can code JavaScript to be executed when the link is clicked - href="javascript:someFunction();" or you can code onclick to execute something or even mouse up over down out. However, the link is intended to do something not to be dragged around.
Use a division or a span and move it around.
Bob
If you look closely at what the browser does, it "drags" the DOM object, in my case a link, upon release the mouseup event does not fire for the DOM object (underneath the mouse, when dragged) or the document (it doesn't seem to bubble).
adding draggable="false" attr helps ...
link
however, there is still an issue of the user highlighting/selecting something with their cursor and dragging the selected element(s).
Using the mouseout event also helps.
If you need to handle dragging in jQuery why not use Draggable?
I have an image that I want to have trigger certain behaviors when the mouse is over, I have a mouseover and mouseout method, but if you happen to have your mouse over the image when the page loads, the mouseover method never fires until you leave the image and come back over it.
Is there a way to detect if the mouse is over an element on the fly without the mouse having to be off of the element and then come over the element to trigger the JS mouseover event? Like is there a document.getElementById("blah").mouseIsOver() type function in Javascript?
I believe this is possible without any action from the user. When your page loads, bind the mouseover event to your image and hide your image (i.e. using CSS display:none). Use setTimeout() to show it again in a few milliseconds (10 should be enough). The even should be fired.
If you don't want to cause the 'flick' effect on your image, you may try using some temporary element instead, attaching event to it, and delegating the event onto your image.
I have no idea if this is cross-browser solution, but it worked from my Firefox 3.0 console ;)
You could use the mousemove event. That would trigger anytime the user moves a mouse; so the only instance of the trigger not firing would be if the user does not move the mouse at all, which should be rare.
The only problem with this is that the event would fire anytime the mouse would move over your image, so you would get a LOT of those events while over the component. What you would probably need to do is implement some sort of flag within your method when the event fires. You turn on the flag when the event first fires, and you turn it off when you leave the component.
This is less than ideal, but I think this will probably satisfy your problem scenario. The following is some quick pseudo code on what that solution might look like, I think it should work.
<img src="blah.png" onmousemove="JavaScript:triggerOn(event)" onmouseout="JavaScript:triggerOff(event)"/>
...
<script type='text/javascript'>
var TriggerActive = false;
function triggerOn(e){
e = e||window.e;
if( !TriggerActive){
TriggerActive = true;
// Do something
} else {
// Trigger already fired, ignore this event.
}
}
function triggerOff(e){
e = e||window.e;
if(TriggerActive)
TriggerActive = false;
}
</script>
You can find some great mouse event information including browser compatibility notes here.
Use document.querySelectpor and onload/onready events.
var a = document.querySelector('#a:hover');
if (a) {
// Mouse cursor is above a
}
else {
// Mouse cursor is outside a
}
There is no way to get the mouse coordinates aside from listening for mouse events, namely mousemove, mouseover etc. However, these events are very sensitive in the sense that moving the cursor by just one pixel is enough to trigger them, so having the cursor hover over your image while perfectly still should be somewhat unusual.