I read here and there about touch but I can't get to it completely. I have an app where I am blocking all touch events on the document.
document.addEventListener('touchstart', function (e) { e.preventDefault(); }, false);
document.addEventListener('touchend', function (e) { e.preventDefault(); }, false);
Now I have somewhere in the document which was working fine before adding above lines but now not.
<form onsubmit="search(event)">
<input id="q" type="text" placeholder="Search.." />
</form>
Blocking document touch are very needed. How can I recitfy the problem and please if you know of any guide that describes touch events in detail that would be wonderful.
Right now you are blocking ALL touch events, but what you really want to do is block all touch events EXCEPT: x, y and z;
You'll just have to make your preventDefault() conditional.
e.g.
document.addEventListener('touchstart', function (e) {
e=e||window.event;
var recip=e.target||e.srcElement;
if(recip.nodeName.toLowerCase()=='input'){return true;}
e.preventDefault();
}, false);
Related
I'm working on my web application using NodeJS, EJS and JQuery. Using JQuery I'am able to detect click event on checkbox but checkbox doesn't appeare checked.
<input type="checkbox" id="myCheck2" class="myClass">
JQuery
function checkboxDefault(){
$("#myCHeck1").attr("checked", false);
$("#myCHeck2").attr("checked", true);
}
$(function() {
$(document).on('click', ".myClass", function (e) {
e.preventDefault();
var event = $(this).attr("id");
if(event == "myCheck1")
$("#myCheck1").attr("checked", true);
else
$("#myCheck2").attr("checked", false);
});
});
I tried using $("#myCheck*").prop, instead .attr() but it doesn't work. Click event and right checkbox ID are rightly detected. Can you help me please? Thanks
prop('checked', true) // to check the box
prop('checked', false) // to uncheck the box
Also #myCHeck1 isn't it a typo?
H is big
Recently, I noticed that the drag and drop function was added back so that you could successfully drag an email from your Microsoft Outlook inbox to a web app's file upload. The issue is that once the file has been dragged to the web app, the email is moved to the Deleted folder in Outlook. Any ideas on how to resolve?
This issue can be solved by the web developper.
You can go to the following web page to see exemples with the different behaviors (copy, move, link) when we do a drag and drop in a browser:
https://codepen.io/SitePoint/pen/epQPNP
Put the following line into 'dragenter', 'dragover' and 'drop' event handler :
e.originalEvent.dataTransfer.dropEffect = "copy";
My code to solve the issue:
$('#myDropArea').on({
'dragenter': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.stopPropagation();
e.preventDefault();
$(this).addClass('draginprogress');
$(this).find('.DragText').css({ 'z-index': '1000' }).show()
},
'dragover': function (e) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
},
'dragleave': function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide();
},
'drop': function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
$(this).removeClass('draginprogress');
$(this).find('.DragText').hide()
if (dataTransfer && dataTransfer.files.length) {
e.originalEvent.dataTransfer.dropEffect = "copy";
e.preventDefault();
e.stopPropagation();
//DO DROP action
}
}
});
I hope this helps
Most likely you are doing move instead of copy.
When on a mobile device, if I want to scroll the page by clicking somewhere on the Google map and scrolling down, I still receive a click event.
I see the "use two fingers to move the map" message, and the page is scrolling as expected but I receive a click event after. And I use this click event to add a marker. So at this point, it's messing the behavior of the whole page.
Here is a simple jsfiddle to reproduce (on mobile of course, or in mobile mode on chrome https://developers.google.com/web/tools/chrome-devtools/device-mode/):
Just scroll down while clicking on the map and an alert with the text "Click Event" will popup.
google.maps.event.addListener(map, 'click', function (evt) {
alert("Click Event");
});
https://jsfiddle.net/83o1my1p/
I believe this problem has already been reported in Google issue tracker. Have a look at the following bug:
https://issuetracker.google.com/issues/64586414
Feel free to add a star in the bug to express your interest and subscribe to notifications. Also, note that the person who filed the bug also found a workaround:
The clicks can be prevent after the scroll, the same way they they are prevented after dragend events when using on a desktop. As I said above, I worked around it myself by handling the mousedown event, and comparing the location of it, to the location of the click event.
I hope this helps!
Here is the work around I used.
var mouseDownPos = null;
google.maps.event.addListener(map, 'mousedown', function(e) { mouseDownPos = e.pixel });
google.maps.event.addListener(map, 'click', function(e) {
var mouseUpPos = e.pixel;
var distance = Math.sqrt(Math.pow(mouseDownPos.x - mouseUpPos.x, 2) + Math.pow(mouseDownPos.y - mouseUpPos.y, 2));
if(distance > 10) return; // Adjust for tolerance
// Do what you need here
});
My solution is to use a var and change it state on touch events. Then use it in the click event:
var dragged = false;
google.maps.event.addListener(map, 'click', function (evt) {
if (!dragged) {
// Do stuff here
}
});
google.maps.event.addDomListener(canvas, 'touchmove', function (event) {
if (event.touches.length == 1) {
dragged = true;
}
});
google.maps.event.addDomListener(canvas, 'touchend', function(event) {
dragged = false;
});
I am listening for drop events on a div element. The events fire in Chrome (v36.0.1985), Firefox (v30) but do not fire in IE (v10.0.9200). I've created a simple JSFiddle to illustrate the problem.
Works:
1.) Open YouTube in Chrome
2.) Open http://jsfiddle.net/AXw6f/17/ in Chrome
3.) Drag a youtube video thumbnail onto the "DropZone" and an alert will appear.
Fails:
Redo the above but use IE 10 or 11. Instead of an alert in step 3 it simply redirects the page.
NOTE: I've found an example where IE would recognize a drop at http://jsfiddle.net/Ctnpe/ but it drops onto a canvas. When I replace the canvas with a div it reverts back to the redirect.
I've tried various combinations of preventDefault, stopPropogation, and return false with no success:
$("#DropZone").on("dragleave", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#DropZone").on("dragenter", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#DropZone").on("dragover", function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$('#DropZone').on('drop', function () {
alert('test');
event.preventDefault();
event.stopPropagation();
return false;
});
Any help is greatly appreciated. Thanks!
I have a text input element that I want user to enter city or zip code and I want to trigger a javascript function as the user types text. My html is as follows
<input type="text"
placeholder="Zip Code Or City Name"
class="input-block-level"
data-bind="value: searchterm, valueUpdate: 'afterkeydown', event: { keyup: getZipCodes }" />
in my viewmodel I have
var getZipCodes = function () {
if (searchterm().length < 2) {
return;
}
datacontext.getZips(searchterm(), zipcodes);
return true;
};
But it turns out that the getZipCodes is never invoked.
I tried data-binding to "onkeyup" but no go, I am sure there is some subtle error I am making. Can someone help me find what I am doing wrong?
I tried changing getZipCodes to getZipCodes = function(data, event) {...} but that does not work either. The function just does not get invoked.
By the way I am trying to do pretty much same as Knockout event binding for input keypress causes weird behavior
but does not work for me.
After changing the definition of getZipCodes as follows it started working.
function getZipCodes(data, event) {
if (searchterm().length < 2) {
return true;
}
datacontext.getZips(searchterm(), zipcodes);
return true;
};
Instead of
var getZipCodes = function()
if I use
function getZipCodes()....
it works, not really sure what the difference is.