WP8 : IE10 : Differences : Unexpected click through on WP8 - javascript

I've came across another difference in implementation of IE10 on Windows 8 and Windows Phone 8 (WP8). The first one was related to the IE10 being deaf/blind to keyup event of "enter". Read more here
The other problem I'm facing now is the click event being triggered even if it's not supposed to be triggered. Again, in Windows 8, it works as expected. In WP8, clicking on the top element (link -> here) triggers the onclick event of the element at the bottom, even if they are not nested within each other (both have body element as a parent).
To test,
open the following jsfiddle link in IE10 on your desktop, and click the element 2, the one on top. The expected result is that nothing will happen.
open the same link in IE10 in your WP8 handheld, and click the same element. The onclick event is triggered on element 1, which is not expected.
Could please anyone shed some more light into this for me?
Thank you.

This is really a bizarre behavior. However there is a pretty simple solution for this.
var modal = document.getElementById("elem2");
modal.onclick = function(e) {
return false;
}
Fiddle

Related

iPad: document on click behaves differently on each browser

So I have an element and when I click on that, it will toggle open and close.
$(document).on("click","#element",function(){
doSomething();
});
So this was not working on an iPad and I searched for the issue on this forum and found different solution and most common one was to add touchstart. So I did that. My code is now:
$(document).on("click touchstart","#element",function(){
doSomething();
});
Now after adding this I am able to click on the iPad. But on desktop, it seems that it is clicking twice. So if I am clicking, it is opening and closing at the same time.
So I the added preventDefault function:
$(document).on("click touchstart","#element",function(e){
e.preventDefault();
doSomething();
});
Now, Chrome is working good on both iPad and Desktop. Mozilla is good on Desktop but Mozilla on the iPad is same, clicking twice effect.

Browser Context Menu not get disappeared on adding a Custom Menu on Google Maps (in Windows - Chrome & Firefox)

I'm using Google Maps API in my react app. I've added a custom context menu on the maps on the right click button handler. It works absolutely fine on all browsers on Mac. Works fine on IE and Edge on Windows except for Google Chrome and Mozilla Firefox (on Windows OS) where apart from displaying the custom menu, the actual browser context menu also appears.
Here's a jsfiddle which contains a sample code which behaves similarly to how my code works.
Please check the above fiddle on Windows in different browsers and on right clicking the maps, you will see that on Chrome and Firefox, two menu appears and on Edge only the custom one (which is the expected behavior and this also works fine on Mac).
var ContextMenu = document.getElementById("my-context-menu");
google.maps.event.addListener(map, 'rightclick', function (ev) {
ShowContextMenuGoolge(ContextMenu, ev);
/** this stop NOT stopping DOM 'context-menu' event from firing */
ev.stop();
});
google.maps.event.addListener(map, 'click', function () {
HideContextMenuGoolge(ContextMenu);
});
}
Expected behavior (Screenshot from Chrome in Mac):
What actually is happening (Screenshot from Chrome in Windows):
I have tested this solution on both FireFox and Google Chrome so just add this piece of code at the very top of your js file:
window.onload = (function(){
document.addEventListener("mouseup", function(evt){
console.log(evt)
evt.preventDefault();
evt.stopPropagation();
});
document.addEventListener("contextmenu", function(evt){
console.log(evt);
evt.preventDefault();
evt.stopPropagation();
});
})();
Also remove the ev.stop() method as it won't do anything. See below.
JavaScript within the browser is event driven, meaning that JavaScript
responds to interactions by generating events, and expects a program
to listen to interesting events. User events (such as "click" mouse events) are propagated from the DOM to the Maps JavaScript API. These events are separate and distinct from standard DOM events.
See this link for the above reference
Also note that disabling the right-click event via contextmenu in the browser may not be the ideal solution. I suggest additional resarch on your side.
I just spent half a day trying to solve this exact same problem, and the solution posted here and in several other threads on this issue just wouldn't work for me. Here's what did:
// Add a listener to the Intelligence Bounds to serve a context menu
google.maps.event.addListener(myPolygon, 'rightclick', (evt) => {
if (evt.vertex && myPolygon.getPath().getLength() > 4) { // Don't let them delete a node if it would turn us into a line
// Set timeout is used only because it solves the issue of Windows Chrome/Firefox browser context menu overlaying our own
setTimeout(this.onVertexRightclick, 0, evt.vertex, this)
}
});
I honestly don't understand why this works but I'm glad someone posted it. Wrapping the handling of the event in a setTimeout() set to zero ms was the only fix that worked.
All the other fixes I've seen relate to the 3.0 maps API and were posted ~ 2018. I'm using the newer Angular widget that came out in 2019 and is supposed to simplify usage and just wrap the API to my understanding, so perhaps that's the difference in this case.

why window doesn't fire click event for touch device

I have a demo link that I want to add click event for window. It works fine for desktop but not for mobile.
Basically I run tests on lastest Chrome and Safari,
$('#button1').click(function(){
$('#text').append('<div> jquery click</div>')
// this would get executed on both desktop and mobile
})
window.addEventListener('click', function() {
$('#text').append('<div> native click on window</div>')
// this only gets executed on desktop
})
So my question is, why the click event doesn't fire when on mobile?
MDN shows that for Safari, if an element is not considered 'clickable', no click event would fire. I would assume that window is not considered 'clickable' so no 'click' event would fire by window (except the ones propagated by other clickable elements).
There is also a Safari link to explains this.
Though I didn't find anything on Chrome, I would assume since it adopts the same idea.
Apparently Safari doesn't consider the window a clickable event.
As ydydyd pointed out, the Safari docs goes into a more detailed explanation.
To fix it, simply replace window.addEventListener() with document.addEventListener()

javascript and jquery not working on chrome android html5

I have a problem on Chrome on Android OS.
I work with a html5 page with jQuery and javaScript.
I have select box , number input .. etc.
When i try to "click", I have:
var hitEvent = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click';
on a input or select nothing happens.
However when i do an alert("something") everything starts working.
On every browser works ok (Safari , Chrome on iPad,iPhone... ; Firefox , Internet Browser on Android) but not Chrome on Android.
Do you have any idea on how to solve this problem?
Normally when everything works after you put an alert,
that means there is a problem in a asynchronous call.
What is happening is that the alert is giving time for the page to really load or an event to actually happen. when you don't put an alert, an action is happening before the event
(for example an element is being called before it is generated)
Search in this perspective.
If it's working in Firefox, it is by pure luck from the way firefox is rendering the page, but still you have to fix your error.

preventDefault blocks right-click menu in Firefox on Mac but not Windows

I have a web application in which I have hooked mouse up and mouse down events; I use them for selection and manipulation of the graphical language for which my application is an editor. To prevent the right-click/context menu supplied by Firefox from showing up, I've placed:
if (evt.preventDefault) {
evt.preventDefault();
}
at the top of each of my mouse up and mouse down event handlers. I don't want to return false; I actually want the event to propagate.
On the Mac, the right-click menu doesn't show up; this is what I expect. On Windows, however, it stubbornly appears, even though Firebug confirms that my call to "preventDefault" is occurring and likewise "defaultPrevented" gets set to true.
Any idea what gives? Has anyone else run across this problem? I'm running Firefox 6.0.2 on both the Mac and Windows.
[Update: more recent versions of Firefox yielded consistent results on Mac and Windows: the context menu failed to be suppressed on both platforms.]
Okay. After putting this aside and returning to it several times, I finally found the solution.
Attempting to deal with the appearance of the context menu in the various mouse listeners appears to be fundamentally flawed. Instead, thanks to code I found here, I was put on the scent of the contextmenu event. That event appears to be the right way to handle things, although the code actually posted on that site didn't do the trick — merely calling "stopPropagation" and returning false was insufficient.
The following worked for me:
element.addEventListener('contextmenu', function(evt) {
evt.preventDefault();
}, false);
This has been tested with Firefox 10.0 on a Mac and Firefox 9.0.1 and 10.0 on Windows 7.
This option is removed in Mozilla's 23rd version.
Go to Tools > Options.
Go to the Content tab.
Click Advanced button next to Enable JavaScript option.
Disable or replace context menus. Check this box and it will magically work again.
There is no way to get around this setting in JavaScript.

Categories