Opened 12 years ago

Closed 7 years ago

Last modified 7 years ago

#3763 closed enhancement (fixed)

Dojo should fix mouse wheel events

Reported by: guest Owned by: liucougar
Priority: high Milestone: 1.8
Component: Events Version: 0.9
Keywords: Cc: jayant.b.sai@…
Blocked By: Blocking:

Description (last modified by bill)

Currently the support for mouse wheel is extremely fragmented (as you will see by running the code below). Since dojo provides the 'fixEvent' function, the fixEvent should probably also standardize the values across the supported browsers. Unlike most cases when it comes to mouse event support, IE/safari/opera are similar and firefox is different.

<html>
  <head>
    <title>Mouse Wheel</title>
    <script type="text/javascript" src="js/dojo-0.9.0beta/dojo/dojo.js"></script>
    <script type="text/javascript">
      function init() {
        var wheelwheel = dojo.byId("wheelwheel");[[BR]]
        if (dojo.isSafari OR dojo.isOpera OR dojo.isIE) { //double | didn't show up in the bug posting[[BR]]
          dojo.connect(wheelwheel, "onmousewheel", handler);
        }
        else {
          dojo.connect(wheelwheel, "DOMMouseScroll", handler);
        }
      }

      function handler(evt) {
        dojo.byId("txf").value = evt.type + ", " + new Date().getTime() + ", d = " + evt.detail + ", wd = " + evt.wheelDelta + ", page : (" + evt.pageX + ", " + evt.pageY + "), screen : (" + evt.screenX + ", " + evt.screenY + ")";
      }

      dojo.addOnLoad(init);
    </script>
  </head>[[BR]]
  <body>
    <div id="wheelwheel" style="border:1px solid #000;">Wheel Wheel</div>[[BR]]
    <input type="text" id="txf" size="120" />

<pre>
Event type value[[BR]]
   - firefox : evt.type : DOMMouseScroll
   - ie, safari, opera : evt.type : mousewheel

Wheel values (browser : property name : wheel values on wheel motion up/down)[[BR]]
ON windows
    - safari, opera, ie : evt.wheelDelta : +/- 120
    - firefox, opera : evt.detail : -/+ 3

ON mac
    - safari : evt.wheelDelta : +/- 120
    - opera : evt.wheelDelta : +/- 40
    - firefox, opera : evt.detail : -/+ 1

Position of cursor during mouse wheel[[BR]]
    - ie, safari, opera : evt.pageX/Y
    - firefox : evt.screenX/Y  
</pre>
  </body>
</html>

Based on the code above, I think dojo's fixEvent should:

  • Add evt.wheelDelta for FF/Moz
  • Standardize the 'wheelDelta' value, or maybe add a property 'delta' with the appropriate mouse wheel delta value, across windows & mac. I am hoping these values are the same as windows in other OSes
  • Fix evt.pageX/Y to use evt.screenX/Y values for FF/Moz (The pageX/Y values are REALLLLY off... can't see why)

Attachments (1)

wheel.patch (5.7 KB) - added by liucougar 7 years ago.
patch to add mouse wheel support to dojo/mouse

Download all attachments as: .zip

Change History (16)

comment:1 Changed 12 years ago by sjmiles

Milestone: 1.0

comment:2 Changed 11 years ago by sjmiles

Milestone: 1.11.2

comment:3 Changed 11 years ago by bill

Description: modified (diff)
Milestone: 1.2future

Fix formatting of comment, and moving to future until there's a volunteer to do this.

Please attach testcases using the "attach file" button.

comment:4 Changed 9 years ago by Karl Tiedt

I took a look at this... that code is a mess :/ not very friendly for someone to come in out the blue and add more normalizations... however talking with dmachi, the fix is fairly simple

delta = (e.delta ? e.delta * -1 : e.wheelDelta / 120);

wheelDelta is the w3c spec'd property delta check catches FF/Opera and wheelDelta catches IE/Webkit and 'mousewheel' is the spec'd event name

comment:5 Changed 8 years ago by William Riley

Any news on this? Seems like it would be fairly easy to take care of.

comment:6 in reply to:  5 Changed 8 years ago by Karl Tiedt

Replying to psychcf:

Any news on this? Seems like it would be fairly easy to take care of.

There was some underlying reason I never did commit a change for this... and it might have been that the fixEvent code was a bit confusing (I'll go back and take a look today to see if I can job my memory on why)

comment:7 Changed 7 years ago by bill

Owner: changed from sjmiles to Kris Zyp
Status: newassigned

comment:8 Changed 7 years ago by liucougar

Milestone: future1.8
Owner: changed from Kris Zyp to liucougar

Changed 7 years ago by liucougar

Attachment: wheel.patch added

patch to add mouse wheel support to dojo/mouse

comment:9 Changed 7 years ago by liucougar

In [28600]:

refs #3763: added wheel to dojo/mouse

it normalizes mozilla DOMMouseScroll events so it has the same wheelDelta attribute as other browsers

!strict

comment:10 Changed 7 years ago by bill

Resolution: fixed
Status: assignedclosed

Also from liucougar: In [28601]: modified various widgets to use dojo/mouse.wheel

comment:11 Changed 7 years ago by bill

Resolution: fixed
Status: closedreopened

I'm getting failures on IE8 in Slider_mouse:

GROUP "mouseWheelTest" has 2 tests to run     _AssertFailure: assertEqual() failed: 	expected
		100
	but got
		0.0

     ERROR IN: 		 function(){
						this.slider = dijit.byId(this.slider);
						return mouseWheelTest(this.slider, this.slider.minimum, this.slider.maximum);
					} FAILED test: ../../dijit/tests/form/robot/Slider_mouse.html::mouseWheelTest::slider2_minToMax 4609 ms     _AssertFailure: assertEqual() failed: 	expected
		0
	but got
		100.0

     ERROR IN: 		 function(){
						this.slider = dijit.byId(this.slider);
						return mouseWheelTest(this.slider, this.slider.maximum, this.slider.minimum);
					} FAILED test: ../../dijit/tests/form/robot/Slider_mouse.html::mouseWheelTest::slider2_maxToMin 4641 ms

and Spinner_mouse:

GROUP "mouseWheel" has 5 tests to run     _AssertFailure: assertEqual() failed: 	expected
		900
	but got
		910

 with hint: 
		spinner 1: wrong value, expected 910, got 900
     ERROR IN: 		 function(){
							// get the mouse's delta
							// note that Spinner spins backwards!
							delta=-doh.robot.mouseWheelSize;
							var d=new doh.Deferred();
							doh.robot.mouseMoveAt(spin1.domNode, 1, 0);
							doh.robot.mouseClick({left:true}, 500);
							// wheel up 10 times
							// this should increase the value by 10
							// takes 100ms/click
							doh.robot.mouseWheel(-10, 1000, 1000);
							doh.robot.sequence(d.getTestCallback(function(){
								var v=spin1.get('value');
								doh.is(v, (900+10*delta), "spinner 1: wrong value, expected "+(900+10*delta)+", got "+v);
							}), 1000);
							return d;
						} FAILED test: ../../dijit/tests/form/robot/Spinner_mouse.html::mouseWheel::spinner1 3609 ms     _AssertFailure: assertEqual() failed: 	expected
		1000
	but got
		910

Not sure if the tests need to be updated or there's a bug in the code.

comment:12 Changed 7 years ago by cjolif

In [28645]:

refs #3763. Leverages dojo/mouse wheel in charting.

comment:13 Changed 7 years ago by dg

Another issue: if the browser is not Mozilla, mouse.event will return "onmousewheel". While it's working fine using "connect", it is not using "on". As a matter of fact, to work properly with "on", it must return the "mousewheel" string instead.

comment:14 Changed 7 years ago by liucougar

Resolution: fixed
Status: reopenedclosed

In [28694]:

fixes #3763: fix mousewheel event has feature test for IE

removed "on" before mousewheel event

!strict

comment:15 Changed 7 years ago by bill

In [28700]:

fix build, refs #3763 !strict

Note: See TracTickets for help on using tickets.