I am working on a game and i am using ontouchstart as a way to handle au ser tapping on the screen. but when i click on the screen it does not register the first time, it makes me click it twice for it to register even one click. I have no idea what to do. does anyone know a fix?
I decided to update my code with a more simplified version of it. this is not working either. on an IOS device at least, no matter what browser i use, i have to tap twice for it to register once.
<html>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet" />
<body>
<h1 class="center-align" id="cn">click me</h1>
<h2 id="cl">clicked:</h2>
</body>
<script>
let click = 1;
document.getElementById("cn").ontouchstart = () => {
click++;
document.getElementById("cl").innerHTML = "clicked: " + click;
};
</script>
</html>
Hey can you try removing the touch-action from the styles? Manipulating touch action ends up affecting touch event listeners
EDIT
Can you try this instead?
object.addEventListener("touchstart", myScript);
Related
I know there is no such concept of "orientation change" on desktops, but inside chrome dev tools there is an option to change the orientation. I see "resize" event firing on changing the orientation which is justified.. since AxB becomes BxA, but why doesn't the orientation even fires?
What alternative can I use to make sure I can fire an event whenever orientation changes on ANY device ?
index.html:
<html lang="en">
<head>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
main.js:
window.addEventListener("orientationchange", function(){
this.console.log("orientation changed")
});
window.addEventListener("resize", function(){
this.console.log("resized")
});
I even tried the jquery event handler, doesn't work.
on chrome 79 for mac.
Thankyou.
orientationchange is the correct event to listen to if you are interested in orientation changes.
What you are describing should work from your dev-tools, since these will extend the available web-API to make your desktop browser behave like a mobile one, from where orientation can really change.
From my Chrome 79 on macOs, clicking the responsive's mode "rotate" icon makes the event fire just fine.
Now, if you wish to check when even a desktop browser passes in vertical mode or horizontal mode, you still have the option to add MediaQuery:
const query = matchMedia("screen and (orientation:portrait)");
query.onchange = e => {
console.log( 'orientation change', query.matches ? 'portrait' : 'landscape' );
// though beware square will be marked as landscape here,
// if you want to handle this special case
// create an other mediaquery (orientation:landscape)
}
You may have to run this snippet in "full page" mode
Is there any way to show keyboard with selected edit text. I used focus() which is perfectly work for in browser. I am able to edit text when browser is ready.
Below is my code
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
$("#main_container").click(function() {
lastSelect.focus();
});
});
but when I load this site in mobile device then it is not appears mobile keyboard unless touch.
please find out the solution.
Thanks in advance
I tried to create a working snippet with your code. I changed a little the syntax to use .on() and .trigger() methods.
Maybe you can use the .trigger() method with touchstart to achieve what you want:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
$("#main_container").on('click', function() {
lastSelect.focus();
$(lastSelect).trigger('touchstart');
});
$("#main_container").trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_container">
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
<p contenteditable=true>Some text</p>
</div>
Hope it helps.
Try using:
$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
lastSelect.select();
$("#main_container").click(function() {
lastSelect.focus();
});
});
If you're using iOS/Safari as your mobile device, it doesn't allow setting focus unless it's in response to a user input event (i.e. touch).
I think this is a feature of mobile Safari rather than a bug. In our
work on FastClick, my colleagues and I found that iOS will only allow
focus to be triggered on other elements, from within a function, if
the first function in the call stack was triggered by a
non-programmatic event. In your case, the call to setTimeout starts a
new call stack, and the security mechanism kicks in to prevent you
from setting focus on the input.
See this post
I created a bootstrap button that has a link inside. Which looks like this:
When you hover on it:
This is the code inside the button:
<div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>
The logout button:
<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>
This button works fine on the PC(IE, SAFARI, FireFox, Chrome, Opera) browser(takes me to the administration page, but it doesn't work on the Mobile devices.
I did the same thing for the logout button, and it works fine on PC and Mobile Devices. I am now puzzled.
The issue may be that you're using the onClick event which won't register on a mobile device (as you don't click - you tap).
This answer explains how to use the "touchstart" event which will work on a mobile.
https://stackoverflow.com/a/22015946/2619909
I know this might be a weird answer. But in some cases mobile clickevents dont work unless you put the style: cursor:pointer; to your button.
Mobile clickEvents are handled very differently, the first "click" or "tap" might be interpreted as a HOVER instead of the click which you are looking for.
So try setting the CSS style of the button to : cursor:pointer;
unfortunately neither setting cursor:pointer; nor adding a touchstart event listener
$(document).ready(function() {
$('#button_id').on('click touchstart', function() {
window.location.href = "/url";
});
});
as #noa-dev and #GitPauls suggested worked for me. for reference I tested on my phone7 (ios11.4 and safari)
working solution: I set the z-index of the button to a large positive number and the button now works.
#button_id{
z-index: 99;
}
solution found thanks to Daniel Acree https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone. I don't know if this generalizes to all iphone/mobile devices.
In my project I'm using AngularJS v1.2.16 and Bootstrap v3.1.0.
The following code is correctly working on desktop side but not when trying it via tablet (ipad)
In case of tablet, the ng-click is not fired on first time, only when "tabbing" again on the div element, it is fired.
<div ng-click="selectObject($index)" ng-class="selectedObject($index)" class="check-obj" ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;">
<span ng-hide="selectedObject[$index]">
<span ng-hide="showwhiteobj"><img src="img/{{imagename}}.svg"/></span>
<span ng-show="showwhiteobj"><img src="img/{{imagename}}-white.svg"/></span>
</span>
</div>
selectObject is just setting an array to true or false:
$scope.selectObject = function (objIndex) {
if ($scope.selectObject[objIndex]) {
$scope.selectObject[objIndex] = false;
} else {
$scope.selectObject[objIndex] = true;
}
};
selectedObject returns an 'active' or undefined (used in ng-class):
$scope.selectedObject = function (objindex) {
if ($scope.selectedObject[objindex]) {
objindex = 'active';
} else {
return undefined;
}
return objindex;
};
funny thing is, that when removing
ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;"
everything is working fine (on desktop and on tablets), unfortunately I cant use different images on hover.
And when trying it with ng-mouseover or ng-mouseenter its only working on desktop - on tablet its only working by doing an extra "tab/click" on the object.
I dont see any errors on console side :-(
Any ideas or workaround?
Thanks a lot guys!
I was also bitten by it a few days ago. On IOs, when you tap, mouseover is triggered first (if is is handled in the code) and then click event is triggered. That's why when you remove the mouse event handlers, the code starts working. I would suggest using ng-touch to handle the touch events, which handle all these oddities correctly.
Read this article for more details.
Do have include angular-touch module ?
Doc here
ng-mouseover and ng-mouseleave does not work on touch screens. It will work fine on laptops or desktops.
You can try using ng-touch. Try this Link
Hope it helps...!
I'm working on a responsive website. There is one type of navigation element that is an clickable image link. I've got many of these on the page. On a normal desktop computer when you mouseover this image it changes color (+ more), and changes back when you mouseout. When clicked, you are linked to a new webpage. Right now this is coded via a simple JavaScript Event handler.
<a href="http://myfakewebsite.com/next_page_1.html">
<img onmouseover="{ this.src = 'image_1_red.png'; }"
onmouseout="{ this.src='image_1_normal.png'; }"
src='image_1_normal.png'
/>
</a>
The issue is when a iPad user taps a clickable event, the following elements are sent.. mouseover, mousemove, mousedown, mouseup and click. And that mouseover event is definitely causes me troubles. There is a fraction of a second where the image_1_normal image disappears and you get a visible icon (white question mark in box with blue background and white border) for a period of time before the site snaps to the new URL. There is not enough time for the image_1_red to appear. The whole affect looks odd. Its noticeable enough that my customer isn't happy. Is there any way to mitigate this issue? Is there a way in JavaScript to say...
if this is a mobile touch device, then skip the whole mouseover thing?
Is there a way to do this inline via Event Handler, or am i going to have to create event listeners for all of the elements in script en mass?
So I did an update to code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init() {
var image_1 = document.getElementById("image_1_nav");
var image_2 = document.getElementById("image_2_nav"); .. etc...
if (!("ontouchstart" in document.documentElement)){
image_1.addEventListener("onmouseover", function(){
this.src="image_1_red.png";}, false);
}
if ("ontouchstart" in document.documentElement){
alert( "Mobile device with Touchstart"); }
}
</script>
The alert test works fine on ipad not on desktop as expected.
Now I'm unable to get the onmouseover function to register...
First off, the system didn't like if (!"ontouchstart" in document.documentElement){ I had to change that to if(!("ontouchstart" in document.documentElement)){ before it would register correctly. I'm now stuck trying to figure out why I can't see the event listeners for onmouseover....
So from what I can see, there appears to be no way to use an 'inline' event handler to avoid OnMouseOver when a website is viewed on a mobile device. This code seems to work:
<img src='image_1_normal.png' />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init() {
var image_1 = document.getElementById("image_1_nav");
var image_2 = document.getElementById("image_2_nav"); //.. etc...
if (!("ontouchstart" in document.documentElement) &&
! (navigator.maxTouchPoints > 0) &&
! (navigator.msMaxTouchPoints > 0) ){
image_1.addEventListener("mouseover", function(){
this.src="image_1_red.png";}, false);
image_1.addEventListener("mouseout", function(){
this.src="image_1.png";}, false); // .. etc...
}
}
</script>
So on a mobile device (iPad) the original image never gets modified at all during a click, No weird momentary popup icons, no miffed customers. Oh, and many thanks to Manuel Ignacio López Quintero for this blog entry. and Patrick H. Lauke and Robert Nyman for their article on detecting touch.