I have a container div I have set touchstart/move/end event listeners in order to scroll the content within it without the page scrolling. Now my issue is how do you allow links within it to be clickable? I am setting e.preventDefault(); within my touchstart handler to prevent the page from jerking while scrolling and this is preventing my links from being clickable. Any ideas or suggestions?
Try binding to touchmove instead. This will only be triggered if the user touches and then drags, so should not interfere with them clicking. (Tested here)
Related
I have a hopefully rather simple Javascript question for you. I have a scrollable, static page which can show/hide a full frame overlay (hiding the whole page) using z-index. When the overlay is shown I create a new event listener to "keydown" in which I for example check for "ArrowDown". When the overlay is hidden, the listener is unsubscribed.
This works beautifully, except that the page below the overlay keeps scrolling up and down as it normally would. I thought I could stop that by using
event.stopPropagation()
which, however, does not help. How can I approach this?
Event.stopPropagation() Prevents the event from bubbling up the DOM, but does not stop the browsers default behaviour.
event.preventDefault();
this should work as it stops the browsers default behaviour.
i'm using the autocomplete plugin from JQuery. When typing, the menu with the suggestions will be shown. If the mouse cursor hovers over the menu, in firefox the menuitem will be selected WITHOUT moving the mouse. In IE and Chrome you have to move the mouse first.
I found out, that the reason is a different behaviour of the mouseenter event in Firefox and other browsers. In Firefox Jquery triggers the event, as soon an element will be shown. In other browsers you have to move the cursor first.
To demonstrate this behaviour i created a fiddle. Click on run and move the mouse into the upper part of the result window. After 5 seconds a div will be shown. In Firefox there will be an alert triggered by the mouseenter event. In other Browsers (IE, Chrome) you have to move the mouse first.
http://jsfiddle.net/sbnqq/5/
I'm aware of possible workarounds in own code ( jQuery how to prevent mouseenter triggering when page loads with cursor hovering element ), but the problems lies in the Jquery.ui.autocomplete plugin.
Are there any ideas for a global workaround to tell Jquery to trigger the mouseenter event after mouseover?
regards
Andreas
On a Windows 7 computer with IE9 and a multitouch screen, like an HP TouchSmart, if you touch the screen on a page that is tall enough to have a scrollbar and move your finger up or down the page scrolls. This doesn't seem to fire any mousemove event. If you touch the screen and initially move left or right instead of up and down it does fire the mousemouse events.
I wan't to cancel this scrolling and cause the browser to invoke a normal mousemove event. Is this possible?
EDIT: There does not appear to be touch events in IE9 Does IE9 support Touch events on Windows 7?
EDIT 2:
A couple other points of interest about this. First is that browsers often fire a mousewheel event when scrolling is triggered by a gesture, this can often be caught and cancelled. Second is that in this particular case, you can prevent the scrolling on IE9 with this hack $(document).bind('mousedown mouseup click dblclick', function (e) { }); which as hacks sometimes do, does not make any sense to me - it may be possible to use fewer event bindings but I didn't have good access to a device to easily test.
After spending some time testing the various methods to suppress default event responses, I have no idea how to suppress the scroll event. You should, however, be able to fire the mousemove event from within a scroll event handler.
window.onscroll = function(e){
element.onmousemove();
}
//jquery
$(window).scroll(function(e){ element.mousemove(); } );
A primitive example.
Two things I suppose you could try to prevent auto-scroll: setting the overflow (or overflow-y) to hidden on you body element or as part of your onscroll handler, attempting to scroll back to your point of origin. Setting body's overflow to hidden will prevent scrolling and hide the scrollbar, but I'm not sure it's what you want.
Try touch events instead of mouse events.
I had the same issue with iPad. I had to add an e.preventDefault(); to the touchmove event. I did this only to the div where I was tracking interaction, not to the whole page.
element.ontouchmove = function(e){ e.preventDefault(); };
No idea about your device, but might be worth a try.
With the Prototype Javascript framework, you would write the following code to listen for the window scroll event.
document.observe(
'dom:loaded',
function() {
Event.observe(
window,
'scroll',
function(event) {
console.info(event);
}
);
}
);
On iOS's Safari browser, the scroll handler is no longer fired when you leave the page and hit back. Android's browser does not have this problem. Someone filed a solution for jQuery, but I use Prototype. How do you make sure you are always listening for the scroll event with Prototype?
Not sure what the details are in Prototype, but as far as mobile browser support for the traditional scroll event it does not exist. You will get a scroll event fired when the scrolling is determined to be over, which I have found to be awkward. If you dig into the jQueryMobile source code you will see how they dealt with it. For example the fixed position toolbars. They hide them anytime a touchstart event is fired. They do this because they have no concrete way to determine if the app is being scrolled or not. And since there is no event being fired as the view is being scrolled they do not know how to reposition the fixed toolbars. Once the scroll end event has fired or the touchend/touchstop/touchcancel event fires they redisplay the toolbar at the correct position.
In trying to figure out the scroll position for a UIWebView, I'm attaching a listener in the HTML that will call back to the main app. I attach the javascript listener like:
window.onscroll = function reportScroll() {
var sY = window.pageYOffset;
alert('Scroll pos: '+sY); // Would evetually trigger a URL or something
}
This event only seems to be triggered at the end of a flick scroll on OS 3.2 (iPad), once the deceleration has ended. However this: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7 seems to indicate that it should be triggered at the end of a single finger pan as well. I really need to know when that pan completes as well.
According to QuirksMode Safari iPhone doesn't fire onscroll event on window, but rather on the document (and any other element). I would bet Safari iPad does the same thing.
I experienced the same problem in iPhone as well: flick scroll correctly produces the onscroll event, but single finger panning does not (I was using this in my fixed menu implementation, where the menu is hidden after ontouchstart event, and restored after onscroll).
I solved the problem by using two parallel events: onscroll and ontouchend. They both refer now to the same event handler (that restores the menu). As events are suppressed during scroll, the ontouchend event does not get fired if the window continues the flick scrolling. Now the event handling works for both flick scroll and panning.
I have not tested this in iPad, I would be interested in knowing if this fix helps in that as well.
In iOS Safari, the onscroll event should be fired only once at the end of the scroll (after deceleration). If you are simply taking your finger off of the screen, think of it as instant deceleration. So if you are performing a 'flick scroll', the onscroll event is still only fired once, at the very end of deceleration.
It sounds like you should also monitor the touchend event:
$(window).on('touchend', function() {
// Do something
});
Note: The touchend event will be fired for each finger that is lifted off the screen.