Hi i'm building a webapp. To remove the onclick delay i found this script on
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
The code is bascically-
function NoClickDelay(el) {
this.element = el;
if( 'ontouchstart' in window ){
console.log("===================touch supported :P")
this.element.addEventListener('touchstart', this.handleEvent, false);
}
}
NoClickDelay.prototype = {
handleEvent: function(e) {
switch(e.type) {
case 'touchstart': this.onTouchStart(e); break;
case 'touchmove': this.onTouchMove(e); break;
case 'touchend': this.onTouchEnd(e); break;
}
},
onTouchStart: function(e) {
//e.preventDefault(); //removed to let the page scroll
this.moved = false;
this.element.addEventListener('touchmove', this, false);
this.element.addEventListener('touchend', this, false);
},
onTouchMove: function(e) {
this.moved = true;
},
onTouchEnd: function(e) {
this.element.removeEventListener('touchmove', this, false);
this.element.removeEventListener('touchend', this, false);
if( !this.moved ) {
// Place your code here or use the click simulation below
var theTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;
var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
theTarget.dispatchEvent(theEvent);
}
}
};
My question is that this works on iphone/ipad but not on Android. What prevents it from working in android and what can i do to achieve a similar behavior in android and other devices??? please help.
We had the same problem and solved it with a slightly different approche.
We were able to fix it for iPhone and Android. Clicks will be fired immediately and the delayed events will be ignored. Maybe you can use it:
https://github.com/cargomedia/jquery.touchToClick
In your link there is someone commented about Android solution (I haven't try it):
Android has same problem with laggy onClicks. Your demo doesn’t work on Android, unless I comment out window.Touch below, so I believe that DOM property is only visible on iOS.
function NoClickDelay(el) {
this.element = el;
// if (window.Touch) not available on android
this.element.addEventListener(‘touchstart’, this, false);
}
With the above change Android gets non-laggy touch event!
touchToClick or fastclick does not work in my case.
I had a lot of code at onclick events, and I'm using Tappy actually:
onClick event in android webview too slow
<meta name="viewport" content="width=device-width, user-scalable=no">
This disables double-tap zooming, so browser does not wait to detect double-tap. No need to bother with tap events. Sadly, it works only in recent browsers.
Related
How make a cross-browser and cross-platform click on a document? I have tryed:
var clickEvent = function (e) {
console.log(123);
};
var body = document.getElementsByTagName('body')[0];
body.onclick = clickEvent;
document.addEventListener("click", clickEvent);
window.addEventListener("click", clickEvent);
body.addEventListener("click", clickEvent);
But in different browsers it works few times. How to make it work only once?
The best one to use is
document.addEventListener("click", clickEvent);
Remove the other ones. It's running many times because you handle the click event on multiple elements (window, document and document.body). They all trigger because all clicks inside the viewport trigger click events on those objects. Your code should look like this:
var clickEvent = function (e) {
console.log(123);
};
document.addEventListener("click", clickEvent);
EDIT: If you want maximum compatibility, use onclick:
var clickEvent = function (e) {
console.log(123);
};
document.onclick = clickEvent;
There could be issue with IE browsers with addEventListener() as some of the old internet explorer browsers doesn't have implementation of it but it has attachEvent. So, you might look to bind it too and app browsing is not limited to desktop devices only. There might be the user is on mobile devices so you might make use of touch events like touchstart/touchend etc. :
var clickEvent = function(e) {
console.log(itHas, 123);
};
var body = document.body; // get the document's body
var itHas = document.implementation.hasFeature(addEventListener), // check for the
docClick, // feature implementation.
ev = navigator.userAgent.indexOf(/mobi/g) !== -1 ? "touchstart" : "click";
// above will use an event based on user agent like for mobile it will use touch event
// and for desktop/laptops click event.
if(itHas){
docClick = body.addEventListener;
}else{
docClick = body.attachEvent;
}
docClick(ev, clickEvent);
I have a mobile based web application. Currently I am encountering an issue when ajax calls are being made. The wait spinner which is enclosed in a div can be clicked through on the ipad device. The javascript event being triggered is touchstart. Is there anyway to prevent this event from going through normal processing?
Tried to call the following, however it did not work.
Disable
document.ontouchstart = function(e){ e.preventDefault(); }
Enable
document.ontouchstart = function(e){ return true; }
How touchstart is handled
$(document).on('touchstart', function (eventObj) {
//toggle for view-icon
if (eventObj.target.id == "view-icon") {
$("#view-dropdown").toggle();
} else if ($(eventObj.target).hasClass("view-dropdown")) {
$("#view-dropdown").show();
} else {
$("#view-dropdown").hide();
}
});
As user3032973 commented, you can use a touchLocked variable, which is working perfectly.
I have used it in combination with the Cordova Keyboard-Plugin. Scrolling will be disabled the time the keyboard is shown up and reenabled the time the keyboard is hiding:
var touchLocked = false;
Keyboard.onshowing = function () {
touchLocked = true;
};
Keyboard.onhiding = function () {
touchLocked = false;
};
document.ontouchstart = function(e){
if(touchLocked){
e.preventDefault();
}
};
I am working on an application and I need to track the mouse wheel movement but my functions are not working as I expect in Internet Explorer. It works in all other browsers but not IE, any ideas on what I am doing wrong?
JS...
var request = true;
var onMouseWheelSpin = function(event) {
if(request === true){
request = false;
var nDelta = 0;
if (!event) { event = window.event; }
// cross-bowser handling of eventdata to boil-down delta (+1 or -1)
if ( event.wheelDelta ) { // IE and Opera
nDelta= event.wheelDelta;
if ( window.opera ) { // Opera has the values reversed
nDelta= -nDelta;
}
}
else if (event.detail) { // Mozilla FireFox
nDelta= -event.detail;
}
if (nDelta > 0) {
zoomFun( 1, event );
}
if (nDelta < 0) {
zoomFun( -1, event );
}
if ( event.preventDefault ) { // Mozilla FireFox
event.preventDefault();
}
event.returnValue = false; // cancel default action
}
}
var zoomFun = function(delta,e) {
if(delta > 0){ // zoom in
alert("In");
}else{ // zoom out
alert("Out");
}
request = true;
}
var setupMouseWheel = function(){
// for mouse scrolling in Firefox
var elem = document.getElementById("zoom");
if (elem.addEventListener) { // all browsers except IE before version 9
// Internet Explorer, Opera, Google Chrome and Safari
elem.addEventListener ("mousewheel", onMouseWheelSpin, false);
// Firefox
elem.addEventListener ("DOMMouseScroll", onMouseWheelSpin, false);
}else{
if (elem.attachEvent) { // IE before version 9
elem.attachEvent ("onmousewheel", onMouseWheelSpin);
}
}
}
I am calling the setupMouseWheel function onload in the body aka
<body onload="setupMouseWheel();">
Thanks for the help!
To listen to the mouse wheel, it's best to listen to DOMMouseScroll, mousewheel and wheel. The last one is IE, and is the only one you're not listening for.
I'll also point out that jQuery has a shortcut for binding multiple events:
$(elem).on("DOMMouseScroll mousewheel wheel", onMouseWheelSpin);
update: noticed that though you tagged this as jQuery, you're not actually using it. To do this without jQuery, just carry on as you are but add a wheel event listener like the others.
I finally found a great cross browser approach here for anyone who has a similar issue
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
This is my first post so ill try to explain it clear:
Im working on a web application, but the main point is, that i want let my users feel like its a native app. In a native app you cant scroll like in iOS safari so i tried to disable scrolling with event.preventDefault. This works great except that form elements and links arent tapable anymore. My solution to that was this little script, but if you start a touch on one of the escaped elements, it scrolls anyway. Not a big deal but its driving me insane...
notes to script:
isTouch returns true/false if its a touchable device
the .contains method returns true/false if an array contains a string
if (isTouch) {
window.addEventListener("touchstart", function (evt) {
var target = evt.touches[0].target;
var tags = 'a input textarea button'.split(' ');
if ( tags.contains(target.tagName) === false ) {
evt.preventDefault();
}
}, false);
}
EDIT
My main question is, is there a solution to fire the tap event without a touchmove event to allow scrolling
EDIT 2
I solved the problem. My solution is, to emulate the events on interactive elements:
var eventFire = function (el, etype) {
if (el.fireEvent) {
(el.fireEvent('on' + etype));
}
else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
if (isTouch) {
window.addEventListener("touchstart", function (evt) {
var target = evt.touches[0].target;
var foc = 'input textarea'.split(' ');
var clck = 'a button'.split(' ');
if ( foc.contains(target.tagName) ) {
target.focus();
eventFire(target,'click');
evt.preventDefault();
}
else {
evt.preventDefault();
}
}, false);
}
Apologize if this is answered already. Went through some of the related questions and google, but ultimately failed to see why this isn't working.
My code is as follows
<iframe id="editor"></iframe>
editorWindow = document.getElementById('editor').contentWindow;
isCtrlDown = false;
function loadEditor()
{
editorWindow.document.designMode = "on";
editorWindow.document.onkeyup = function(e) {
if (e.which == 91) isCtrlDown = false;
}
editorWindow.document.onkeydown = handleKeyDown;
}
function handleKeyDown(e)
{
if (e.which == 91) isCtrlDown = true;
if (e.which == 66 && isCtrlDown) editFont('bold');
if (e.which == 73 && isCtrlDown) editFont('italic');
}
function editFont(a,b)
{
editorWindow.document.execCommand(a,false,b);
editorWindow.focus();
}
This code works perfectly in Chrome, but the keyboard shortcuts do not work in Firefox. In fact, in Firefox it does not seem to register the events for keyup/keydown at all.
Am I doing something grossly wrong here that is mucking up Firefox?
For editable documents, you need to use addEventListener to attach key events rather than DOM0 event handler properties:
editorWindow.document.addEventListener("keydown", handleKeyDown, false);
If you care about IE 6-8, you will need to test for the existence addEventListener and add the attachEvent equivalent if it is missing.
Try using:
editorWindow = document.getElementById('editor').frameElement;
I'm not sure this will solve the issue, it may also be:
editorWindow = document.getElementById('editor').contentDocument;
Or even possibly:
editorWindow = document.getElementById('editor').frameElement.contentDocument;
One thing you can do is put the entire string in a try statement to catch any errors and see if the content is being grabbed from within the iframe.
try { editorWindow = document.getElementById('editor').contentWindow; } catch(e) { alert(e) };
The only other thought I have is that you're typing into a textbox which is within an iframe, and you may possibly have to add the onkeydown event to that specific item, such as:
var editorWindow = document.getElementById('editor').contentDocument;
var textbox = editorWindow.getElementById('my_textbox');
function loadEditor()
{
editorWindow.document.designMode = "on";
textbox.onkeydown = function(e) {
alert('hello there');
}
}
I hope one of these is the solution. I often find when it comes to cross-platform functionality it often boils down to a little trial and error.
Good Luck!