Incorrect DOCTYPE leads to has(‘dom-quirks’) breaking mouse events in dojo 1.7.2

Just a quick note for posterity. I’ve been upgrading a web app from dojo 1.6.1 to 1.7.2 and hit various hurdles along the way. This latest one has to do with the `has()` detection in dojo/mouse.js and how it decides what mouse event codes are what.

http://www.w3.org/TR/DOM-Level-3-Events/#events-MouseEvent-button dictates that the `button` field value 0 means the primary mouse button. Now, consider this code from dojo/mouse.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
has.add("dom-quirks", win.doc && win.doc.compatMode == "BackCompat");
has.add(
    "events-mouseenter",
    win.doc && "onmouseenter" in win.doc.createElement("div")
);
var mouseButtons;
if(has("dom-quirks") || !has("dom-addeventlistener")){
    mouseButtons = {
    LEFT:   1,
    MIDDLE: 4,
    RIGHT:  2,
    // helper functions
    isButton: function(e, button){ return e.button & button; },
    isLeft:   function(e){ return e.button & 1; },
    isMiddle: function(e){ return e.button & 4; },
    isRight:  function(e){ return e.button & 2; }
    };
}else{
    mouseButtons = {
    LEFT:   0,
    MIDDLE: 1,
    RIGHT:  2,
    // helper functions
    isButton: function(e, button){ return e.button == button; },
    isLeft:   function(e){ return e.button == 0; },
    isMiddle: function(e){ return e.button == 1; },
    isRight:  function(e){ return e.button == 2; }
    };
}
dojo.mouseButtons = mouseButtons;

What broke this for me was having an incorrect DOCTYPE at the top of my .html file that uses dojo:

<!doctype html public “-//W3C//DTD HTML 4.01 Transitional//EN”>

With this DOCTYPE, the `dom-quirks` feature detection returned true, and the first path was executed in the mouse.js if statement. The fix in my case was to change my DOCTYPE to the standard “HTML” doctype:

<!doctype html>

With this DOCTYPE, the has() detection for dom-quirks returns false, and the mouse event codes are set up correctly. This means, for me, the dojo drag-and-drop stuff all starts working again, because the onMouseDown handler correctly detects the left mouse button being pressed, and the drag operation then proceeds as normal.

Share and Enjoy

This entry was posted in Dojo. Bookmark the permalink.

One Response to Incorrect DOCTYPE leads to has(‘dom-quirks’) breaking mouse events in dojo 1.7.2

  1. Paul Lysak says:

    Thank you! I had a problem with items selection in dijit.Tree, this post helped me realize that the issue is caused by incorrect mouse handling.

Leave a Reply

Your email address will not be published. Required fields are marked *