We Keep Coding

How to debug clicking/tapping of links in Mobile Safari

Is there a way to prevent MobileSafari from continuing on the path of navigating to a new URL whenever I am debugging a complex interaction that involves an anchor tag with a valid HREF attribute?
I'm developing some Javascript code and testing click/touch events on an iPad. I've got Safari's Dev Tools on my Mac communicating with Mobile Safari on iPad with no issue. My issue looks like the following:
On the iPad, I click an tag that can do some complex interactions (tap vs. long-press, etc).
Safari's dev tools break at my breakpoint, directly inside the event handler
The iPad continues to follow the link even though the javascript code is broken.
For example:
$('a').on('click', function(e) {
console.log('wtf');
// ...Handler Code...
});
Setting a breakpoint in Safari Dev Tools on the console.log() statement will break the Javascript as expected, but the browser will continue to navigate to the link's address, causing the page to change. This effectively keeps me from debugging any interactions involving a link click.
However, if you preventDefault() on the event, Safari will not continue (which is what would happen if I wasn't debugging):
$('a').on('click', function(e) {
e.preventDefault();
console.log('wtf');
// ...Handler Code...
});
This is very different from how Chrome/Firefox/IE handle this style of debugging. Is this a bug in MobileSafari or Safari Dev Tools, or am I missing something?

div top position on hover remembered after magnific popup initialisation

I've been working with magnific popup which is a fantastic little script. I've had one issue lately though.
I've made an example on codepen to isolate the problem - http://codepen.io/patrickwc/pen/xiajJ
Basically, when you hover over the figure element, figcaption moves up via changing the top value. Then I've made a link absolutely positioned over the entire of that figcaption element, so that when you click or tap again the link magnific popup window is activated. This part works fine, but for some reason in some browsers, when you exit the magnific popup window (close or clicking outside makes no difference) the figcaption element gets "stuck". I'd like it to return to where it was before the hover event, as it does in most browsers. But for some reason in IE11 and Chrome Canary (latest stable Chrome is fine) seem to remember that the element was hovered, and the figcaption box gets stuck there, unless you hover again.
Usual behaviour you can see in most browsers.
IE11 and Chrome Canary (Version 39.0.2152.0 canary) after closing popout window:
Interestingly this does not happen on browserstack. I have Windows 8.1 and Chrome Canary 37, as well as IE11 and the behaviour is fine on browserstack, but not on my or others PCs.
I realise I should probably use transform to get hardware accelerated transforms, but I need IE8 support. I'm going to see if transforms make any difference now, but I'm guessing they won't. Maybe I'll have to use js instead of the hover event to move the figcaption element?

So I got some help from the developer of magnific popup and a friend of mine who's a javascript wizz. The .open-popup-link a tag was being focussed, once the popup had closed. I found out about jquery's blur event and the following code fixed the issue, which only happened in IE11 and Chrome Canary (v38 and 39).
jQuery('.open-popup-link').on('focus',function(){
jQuery(this).blur();
})

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.

Using Firefox, how can I monitor all events that are fired?

I'm trying to debug a web page that makes heavy use of events, and so I need to monitor all events that are fired.
Most of the events are bound using jQuery. Hence, it would be particularly useful if there was a way to specifically monitor only those events.

Of course you can do just fine with Firebug, the console and the scripts tab where you can add breakpoints and watches, but you want to do it smarter / easier obviously.
There is a neat Firebug plugin called EventBug that just logs all the events and groups them by event type so you can expand and see what triggered them.
EventBug doesn't do it realtime, you have to refresh though.
One other way is to use the 'Log Events' feature against any DOM element in Firebug. This does do it realtime and you can see what order events are fired / triggered as well.
Try this:
Toggle open Firebug
Right click the element in HTML tab, if you want to see all events then right click <body>
Choose Log Events from the context menu
Make sure the Console tab is enabled
Click to enable the 'Persist' mode in the Console tab (otherwise Console tab will clear after the page is reloaded)
You may have to select Closed (manually)
Voila! watch events stream in the console tab
This is what you see with Log Events:
Also worth trying the FireQuery add-on for Firebug to see what elements in the DOM have jQuery events attached to them and what they are.
And as benvie's answer mentions, this is possible in webkit's developer tools as well.

This has been introduced some versions ago but as of Firefox 35 events associated with an element can be seen on the Inspector: next to the element which you want to see the events (in case there is any) there will be an icon with the 'EV' letters. Click it and you will see a small popup window with the events for that element.
More info: http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

This doesnt exist in Firebug I believe, and the underlying problem is lack of support or lack of exposure at the api level. Alternatively, there's only a few ways to subscribe to DOM events: Element.prototype.addEventListener (and window.addEventListener and document.addEventListener and XMLHttpRequest.addEventListener and some others) aside from 'onevent' properties which are observable and interceptable.
But realistically, the WebKit debugger and Chromium's debugger (which is webkit's with extra points) allow one to debug and observe attached listeners. Sometimes it's easier to debug one browsers's bugs in another browser with better exposure of application/runtime state, even when that browser doesn't exhibit the bug.
https://developers.google.com/chrome-developer-tools/docs/elements

Event Listener Breakpoints have been introduced in FF 69 (and further improved in FF 71). Relevant docs are here.
It allows you to automatically break on any event of a given type. This screenshot (from above article) shows how it breaked on a Keyboard event:
The article further explains (1) how instead of breaking every time, it can just log matching events, and (2) how you can blackbox certain sources, to avoid having to wade through the internals of framework code (such as jquery, react etc.).
They present another screenshot of how that looks like:

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.