Recently I looked into some reported problems with my word game site Qindar.net and the Safari browser. This was a bit easier for me since Apple released a Windows version of Safari (which, albeit arguably surplus to requirements, is actually a very nice, usable browser on Windows).I discovered that the technique I was using to work out which method of event attachment to use was flawed and was failing for Safari. So I refined it slightly to fix the problem.<\/p>\n
The problem is that Javascript on Firefox, Opera and Safari support the “W3C DOM Level 2 event binding mechanism”, which uses a function on DOM elements called addEventListener. Internet Explorer however uses a technique that was apparently from before that particular standard was drawn up, employing a function called attachEvent. In addition, the names of the events are different. For instance, IE uses events such as “onmousemove”, “onmouseup”, but the other browsers omit the “on” and name these events “mousemove” and “mouseup”.<\/p>\n
Curiously, Opera is the only browser to support both styles.<\/p>\n
The simplest and safest way of working out which one to use is simply to test for the existence of a function called addEventListener. I quite like this method because it works on the latest version of the big four browsers, and IE 6, without having to do any browser version probing.<\/p>\n
For instance, here is how to add focus and focus lost events to a page in a way that will work on all modern browsers:<\/p>\n
[Javascript]
\nif (window.addEventListener != null)
\n{ \/\/ Method for browsers that support addEventListener, e.g. Firefox, Opera, Safari
\nwindow.addEventListener(“focus”, FocusFunction, true);
\nwindow.addEventListener(“blur”, FocusLostFunction, true);
\n}
\nelse
\n{ \/\/ e.g. Internet Explorer (also would work on Opera)
\nwindow.attachEvent(“onfocus”, FocusFunction);
\ndocument.attachEvent(“onfocusout”, FocusLostFunction); \/\/focusout only works on document in IE
\n}
\n[\/Javascript]<\/p>\n
This is how to add mouse events:<\/p>\n
[Javascript]
\nif (document.addEventListener != null)
\n{ \/\/ e.g. Firefox, Opera, Safari
\ndocument.addEventListener(“mousemove”, MouseMoveFunction, true);
\ndocument.addEventListener(“mouseup”, MouseUpFunction, true);
\n}
\nelse
\n{ \/\/ e.g. Internet Explorer (also would work on Opera)
\ndocument.attachEvent(“onmousemove”, MouseMoveFunction);
\ndocument.attachEvent(“onmouseup”, MouseUpFunction);
\n}
\n[\/Javascript]<\/p>\n
To remove the mouse events, I recommend…<\/p>\n
[Javascript]
\nif (document.removeEventListener != null)
\n{ \/\/e.g. Firefox, Opera, Safari
\ndocument.removeEventListener(“mousemove”, MouseMoveFunction, true);
\ndocument.removeEventListener(“mouseup”, MouseUpFunction, true);
\n}
\nelse
\n{ \/\/e.g. Internet Explorer (also would work on Opera)
\ndocument.detachEvent(“onmousemove”, MouseMoveFunction);
\ndocument.detachEvent(“onmouseup”, MouseUpFunction);
\n}
\n[\/Javascript]<\/p>\n
I personally pray there comes a time when these kinds of workarounds are not required. In the mean time, this will have to do.<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I looked into some reported problems with my word game site Qindar.net and the Safari browser. This was a bit easier for me since Apple released a Windows version of Safari (which, albeit arguably surplus to requirements, is actually a very nice, usable browser on Windows).I discovered that the technique I was using to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":0,"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts\/25\/revisions"}],"wp:attachment":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}