Most trackpads on laptops have a tap-to-click option/feature where light taps are recognized as presses (either pressing one of the trackpad buttons or pressing down on the trackpad surface on buttonless trackpads) and trigger a click. I've noticed on my Macbook Pro that CSS :active styles aren't applied to HTML elements if I tap on my trackpad; they're only applied if I press down on the trackpad and it clicks.
Is there a way to make trackpad taps (not mobile touchscreen taps) trigger the :active state?
How events like these are registered (touch pad taps, and clicks) are processed by the operating system / the browser, and there isn't a way to register this through CSS/JS as danyamachine said it works on his device, this could because he was using a different browser that handles clicks vs taps differently
Related
i have 7 button gaming mouse when i press back button on mouse this media dialog appear , when i scroll anywhere on any tab this is also appear . please tell me how can i disable this one its very irritative .
i already disable hardware media key hendling and Global Media Controls Modern UI from chrome://flags/
This was finally resolved.
Near the scrolling wheel is a dpi button, which also can be used to switch
between normal and media mode by holding it for 3 seconds. In the media mode the wheel controls the volume and does not scroll.
I have a cordova app where there is some input fields which requires the keyboard. But when the keyboard is open it's like the app is frozen. More specific, I have a div as a bottom bar which has a fixed position, but when the keyboard is opened, it can scroll, however when I close the keyboard, everything returns to the expected position. Any idea how to make it not freeze? This is only a problem on iOS. Android works perfect.
My app has the same issue, selecting an input field causes the keyboard to show up and severely lag the app until the keyboard is hidden. After testing simple pages with no scripts or css on multiple devices I found that it primarily affects iPads on at least iOS 8.0 and above. It can cause slowdowns on iPhones but they seem to recover a lot faster.
The best solution I've found so far is to setup an in app keyboard. For my login page, I have an element that is styled as an input field and when it is clicked, it toggles a keyboard div element to appear which has buttons for each key inside it.
I'm building out my jquery mobile app out and have been testing in Chrome. Its the best for me because the debugging is great.
I was using a TAPHOLD event but decided to go away from that for a swipe-right event.
Chrome actually registered the taphold, so I was hopeful that it would register a swipe right with the mouse. But I cannot get it to register unless I have to do something else... anyone?
By now the actual chrome developer tools (tried chrome 20) can emulate touch and swipe events.
You can activate that behavior through the tool options, accessible via the little gear-wheel in the bottom corner.
Just check "Emulate touch events" from the options. Then you can also swipe with your mouse.
In desktop browsers I tend to use the right mouse button testing swipes. It will open a context-menu but it actually works (I normally use Chrome 17 and Firefox 10).
For instance when left-clicking and then swiping on an image in Chrome or Firefox it selects the image and you are then moving around the transparent thumbnail of the image. But when right-clicking and swiping the swipe event is fired.
UPDATE
This update is pretty late to the punch but this just shouldn't be necessary anymore. In fact the Chrome developer tools (the ones I'm used to using) have gotten a lot better about emulating devices.
A lot of the answers here are old and out of date. As of Chrome 63, swipe is built-in as long as you are in responsive mode with developer tools open. So open Developer Tools (3 dots->tools->developer tools), then click the phone/tablet icon on the left to put Chrome into a mobile mode. Then if you left click and hold, you will see the cursor changed to a dot, and you can swipe.
Update: this appears to be enabled in Chrome by default (37.0.2062.120 as of September 2014) you do the following:
Open Developer Tools
Click the little phone icon next to the search icon in the upper left (next to the Elements tab)
In the Emulation tab on the bottom choose a device model from the drop down
Previous answer:
To get this working in the current version of Chrome (32.0.1700.107 as of Feb 2014) you do the following:
Open Developer Tools
Click the gear icon in the upper right
Select the Overrides tab on the left
Click on Show 'Emulation' view in console drawer
Close the Settings popup
Open the Console (button to the left of the gear)
Click the Emulation tab in the console (next to Console and Search)
Choose a device and click on Emulate (and click Reset to cancel emulation)
I'm trying to get up to speed on HTML5 by prototyping an extremely simple drawing app using <canvas> and touch events like ontouchstart and ontouchmove.
This is displaying and working fine in an Android emulator where I use mouse clicks to simulate touch events. However, it doesn't work at all when running in my desktop browser (Safari 5.1.1, Firefox 7 on Windows).
I thought the mouse click events would be interpreted as touch events like they are when running within the emulator.
I wonder now if perhaps desktop browsers simply don't support touch events.
It's actually the other way round. Mobile browsers translate touch to mouse events for legacy support. If it needs to work on both mobile and desktop, and you don't really need touch events, you could just use mouse events instead. Failing that, bind both touch and mouse events and have the touch event cancel the mouse event. This way on mobile devices the touch fires and mouse doesn't. On desktop the touch doesn't fire and the mouse will.
For pilau, here's a simple example of cancelling the click event on mobile devices. Please note the question is more about drawing which would involve click dragging, which would require a bit more code for detection, but the basic idea is the same, bind the events you need to handle. Then e.preventdefault() will stop the mobile browsers from emulating click type events.
$('#element').on('touchend click', function(e){
// Do your onclick action now
// cancel the onclick firing
e.preventDefault();
});
Firefox 6 and above supports the touch events. See the compatibility table here.
MDN article on Touch Events
EDIT : Are you testing with a touchscreen or the mouse? The mouse events do not automatically translate to touch events. See this post for how to simulate touch events with a mouse.
ontouchstart will be a add on to the iphones version of webkit for javascript. you could test it but only on an emulator.
If you are working with react, the synthetic events are different:
onClick Works for both, mobile and desktop.
onTouchStart works only for mobile. Also, this event goes before the onClick event. Maybe it is the first event to being trigged.
In my case, I needed an event before the onClick event in a mobile and desktop environment, so I used onMouseDown. which with synthetic events from React, works for both, mobile and desktop.
Remember, for development propose, the easiest way to test in mobile or in desktop is with the developer tools, clicking on Toggle device toolbar or cmd + shift + M in the inspector.
Good luck!
My web application is to be supported by iPhone, Android and Blackberry torch. The code is working fine except some issues. One of the major issues that i am facing is:
When on a page, there are some tags. Some of which contains a text box for letting user's entry. Everything is working fine on iPhone and Android. But in Blackberry, when i am toggling between textboxes by using taps i.e. first open virtual keyboard by tapping on one textbox, then tap on other textbox, then tap again on the other one. In such cases, my background screen that should be displayed at the background of virtual keyboard, becomes completely blank(like it is not repainted as soon as virtual keyboard is opening and closing). If i slightly scroll, i get the background back.
Does anyone know about this problem? Is there any way i can retain my background or kind of refresh it?