How to handle mouseover and mouseleave events in Windows 8.1 Touchscreen - javascript

In my asp.net project, I have written javascript functions on mouseover and mouseleave/ mouseout events of buttons and some other controls. Previously this website was used on non touchscreen devices. But now when I am trying to access the same website on Windows 8.1 , on Internet Explorer 10/11,the problem is, after touching a screen mouse click event is fired (which is ok in my case)and when I remove finger on screen, mouseleave event is fired (which is problematic e.g. dropdowns are not working properly after mouseleave events fired). This Problem arises only in Internet Explorer 10/11. And the site is working fine with all its functionality on Chrome. Is there any JQuery Plugin or some other solution for this problem? Please reply soon. I need this very urgently.
Thanks in advance.

Add aria-haspopup="true" attribute to element triggering dropdown showing/hiding.
https://msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx

Related

I have to click twice to activate any button action (Ionic/Angular)

I have an app which is an Ionic Project.
in android it is working fine. But when I build and run the project in ios I have to click Every button twice (double tap) in Simulator and in Device also.
I don't know what exactly is the issue. and how to debug.
Is their someone who knows what to do ?
Edit this is happening for Buttons and a tag.
I put this CSS:
.button:hover
{background-color:red;}
and when I run my project and click on button then this :hover css is applied and click event not triggers.
On iOS devices, I believe the first touch is seen as 'hovering' in a similar way to when you hover over something with your mouse. Essentially, the first touch on iOS is seen as hover and the second is seen as a real click.
You can listen for .hover events instead of .click events based on the browser, which will be Safari on iOS and Chrome on Android. Although some iOS devices may be running chrome, this could work for the majority of the cases, assuming it is possible with Ionic.

Sencha Touch 2 pop event issue under IE on Nokia Lumia 630

I have one very unpleasant issue under IE on Lumia.
I'm developing mobile application with Sencha Touch 2 and
use pop event of Main view to attach some logic:
http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.navigation.View-event-pop
Under all browsers the logic is called and application working properly instead
IE on Nokia Lumia 630. The idea is to be executed some logic when
the user click on back button and go to main view. Events attached to
backbutton event not fires at all. A also tried onbeforeunload on
onunload events but there are also not called.
I would be very grateful for any ideas and recommendations on how to solve this problem.

How can i fire jQuery .click() or .tap() event on mobile devices explicitly

I am firing a click event on a div by click() function of jquery. It is working good in desktop browser, but in mobile devices it is not working.
I found that click event doesn't supported by mobile browsers, i tried tap event by trigger("tap"), but it is also not working.
I need to tap or click event in mobile devices by jquery/javascript, how can i do this ?
Click events should work on mobile. Sometimes you need to add
cursor: pointer
to the clickable elements.

Javascript Drag and drop in windows phone 7.5

I'm trying to get drag and drop functionality to work in a windows 7.5 phone.
Initially i tried using the jquery ui draggable which worked in all browsers except windows 7.5.
Later on exploring further, i found out that there are no touchstart, touchend and touchmove events in windows.
So i tried getting it to work using mousedown, mousemove events which shockingly were firing. But they donot fire in a proper sequence. (mousemove fires before mousedown).
Nor did the dragstart and dragend events work.
I need to get this to work. Do you have any suggestions ?
/*Eg1:does not work*/
$("#draggable").draggable();
/*Eg2:This event does not fire*/
$("#draggable").bind("touchstart touchmove touchend", function(){
alert("touch events supported");})
/*Eg3: In this case, mousemove fires before mousedown.*/
$("#draggable").bind("mousedown", function(){
alert("mousedown");});
$("#draggable").bind("mousemove", function(){
alert("mousemove");});
I only have experience working with Javascript in Windows Phone 8 which uses IE 10 (as opposed to IE 9 in WP7.5 and WP7.8) but you could give my approach a try.
In WP8 (IE10) Microsoft supports the pointer events MSPointerUp MSPointerMove MSPointerDown instead of touchstart, touchmove and touchend events. Try using these to see if they work.
In the example I had created, however, I did not even need to use those proprietary events as IE 10 happily used the standard mouse events (mouseup mousemove mousedown) and worked well to an extent. I did not have any problem with the order of events (like you stated in the question). The main problem that arose for me while dragging was that the mousemove event stopped being triggered (by the browser) and the browser instead started panning the page leaving my dragged elements in limbo state (no mousemove or mouseup triggered). Using event.preventDefault() did not help either as it did not prevent the page from panning. To overcome this problem I went through Microsoft's documentation about their touch events and came across this CSS line.
-ms-touch-action: none;
I applied this on my elements to be dragged and my problem was solved. You can read all about the above proprietary CSS property here. Be careful not to apply this property to the entire body of the page (I had done that earlier) as it prevents the default browser behaviour of page panning and zooming. As I said apply it only on the elements to be dragged and it works.
Yet again this is my experience for WP 8. I do not know if it works for previous versions of Windows Phone.

How to capture the hide keyboard event on iOS using JavaScript

I need to do some resizing of the content of a web page when the hide keyboard button is pressed on an iPad virtual keyboard. Which JavaScript event is launched when the keyboard is hidden?
You can use the focusout event. It's like blur, but bubbles. It will fire when the keyboard closes (but also in other cases, of course). In Safari and Chrome the event can only be registered with addEventListener, not with legacy methods. Here is an example I used to restore a Phonegap app after keyboard dismissal.
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
Without this snippet, the app container stayed in the up-scrolled position until page refresh.
Here is a good place to start List of supported Javascript events on iPad
which leads to https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
which does not list it.
This one gives a work around iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
window.onblur = function(e) {
window.scrollTo(0, 1);
};
This is my solution, which works fine, if someone pressed the "closekeyboard" for iOS 14.7 .

Categories