Opened 5 years ago

Closed 4 years ago

#18346 closed defect (invalid)

Mouse-up event not detected in IE11 when using mobile views

Reported by: thomasneirynck Owned by: thomasneirynck
Priority: high Milestone: 1.11
Component: DojoX Mobile Version: 1.10.2
Keywords: Cc:
Blocked By: Blocking:

Description

When using a dojox mobile view, the mouse up event is not detected in IE11 (windows 7).

That mouseup event is correctly detected on other browsers (e.g. Chrome/FF).

To reproduce the issue, see the sample-code below. (please update the paths to point to the correct location of your dojo installation).

<html class="iphone_theme dj_landscape dj_tablet mobile dj_chrome">

<head>

  <link href="../../../dojox/mobile/themes/iphone/iphone.css" type="text/css" rel="stylesheet">

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Test mouse up IE11</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

  <style>
    html, body {
      height: 100%;
      margin: 0 auto;
      font-family: Arial, Helvetica, sans-serif;
      color: #333333;
      font-size: 13px;
    }

    #mapview {
      margin: 0;
      border: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
  </style>

  <style type="text/css"></style>
  <script type="text/javascript" data-dojo-config="async: 1" src="../../../dojo/dojo.js"></script>


</head>

<body class="claro mblBackground" style="visibility: visible;">

<div id="mapview" data-dojo-type="dojox.mobile.View" data-dojo-config="selected: true" class="mblView" widgetid="mapview" style="visibility: inherit; border:  1px solid red"></div>
<div data-dojo-props="backRef: '#mapview'" data-dojo-type="dojox.mobile.View" id="verticalview" class="mblView" widgetid="verticalview" style="visibility: inherit; display: none;"></div>

<script>

  require({
    baseUrl: "../../..",
    packages: [
      {name: "dojo", location: "./dojo"},
    

Change History (10)

comment:1 Changed 5 years ago by thomasneirynck

In the original ticket description, the example code is cut off.

Here is the complete sample code.

<html class="iphone_theme dj_landscape dj_tablet mobile dj_chrome">

<head>

  <link href="../../../dojox/mobile/themes/iphone/iphone.css" type="text/css" rel="stylesheet">

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Test mouse up IE11</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

  <style>
    html, body {
      height: 100%;
      margin: 0 auto;
      font-family: Arial, Helvetica, sans-serif;
      color: #333333;
      font-size: 13px;
    }

    #mapview {
      margin: 0;
      border: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
  </style>

  <style type="text/css"></style>
  <script type="text/javascript" data-dojo-config="async: 1" src="../../../dojo/dojo.js"></script>


</head>

<body class="claro mblBackground" style="visibility: visible;">

<div id="mapview" data-dojo-type="dojox.mobile.View" data-dojo-config="selected: true" class="mblView" widgetid="mapview" style="visibility: inherit; border:  1px solid red"></div>
<div data-dojo-props="backRef: '#mapview'" data-dojo-type="dojox.mobile.View" id="verticalview" class="mblView" widgetid="verticalview" style="visibility: inherit; display: none;"></div>

<script>

  require({
    baseUrl: "../../..",
    packages: [
      {name: "dojo", location: "./dojo"},
      {name: "dojox", location: "./dojox"},
      {name: "dijit", location: "./dijit"}
    ]
  }, [
    "dijit/registry",
    "dojox/mobile/parser",
    "dojox/mobile/deviceTheme",
    "dojox/mobile/View",
    "dojox/mobile/Heading"
  ], function(registry, parser, deviceTheme, View, Heading) {

    parser.parse();

    var mapview = document.getElementById("mapview");
    mapview.onmousedown = function(e) {
      console.log('down', e);
    };
    mapview.onmouseup = function(e) {
      console.log('up (this event is almost always absent on IE11-windows)', e);
    };

  });


</script>

</body>
</html>

comment:2 Changed 5 years ago by juleswinnfield

This issue is also reproducible on a windows phone: Model: Nokia Lumia 820 Software: Windows Phone 8.0

You can also use an official dojo mobile sample: http://demos.dojotoolkit.org/demos/mobileOpenLayers/demo.html

Try zooming in/out by clicking on the +- buttons or zoom in/out with touch zoom. No zoom/touch zoom actions can be performed.

Nexus 4 works fine.

comment:3 Changed 5 years ago by bill

Component: DojoxDojoX Mobile

comment:4 Changed 5 years ago by cjolif

Component: DojoX MobileDojox

This is not a dojox/mobile issue. BTW I don't think dojox/chartings/maps ever declared WP8 support :(

comment:5 Changed 5 years ago by cjolif

Component: DojoxDojoX Mobile

Oups sorry, I apparently modified the wrong issue. This one is dojox/mobile.

comment:6 Changed 5 years ago by Patrick Ruzand

Owner: set to Patrick Ruzand
Priority: undecidedhigh
Status: newassigned

comment:7 Changed 5 years ago by Patrick Ruzand

Owner: changed from Patrick Ruzand to Eric Durocher

comment:8 Changed 5 years ago by Eric Durocher

This is probably an effect of this change since 1.9:

http://dojotoolkit.org/reference-guide/1.10/releasenotes/1.9.html#dojo-touch

The dojoClick property is set by default in all Dojo Mobile pages, which causes some mouse events to be discarded.

There are 2 ways to fix this:

  1. Set document.dojoClick = false; in the startup code of your app. This will disable the dojo/touch code that eliminates the 300ms delay on mobile browsers. Of course, this also means that you *will have* the 300ms delay if you run your app on a mobile device. It is up to you to decide if that is acceptable in your application.
  1. Use the cross-browser touch events from dojo/touch instead of mousedown/up:
	require({
		baseUrl: "../../..",
		packages: [
			{name: "dojo", location: "./dojo"},
			{name: "dojox", location: "./dojox"},
			{name: "dijit", location: "./dijit"}
		]
	}, [
		"dijit/registry", "dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile/View",
		"dojox/mobile/Heading",
		"dojo/on", "dojo/touch"
	], function (registry, parser, deviceTheme, View, Heading, on, touch) {

		parser.parse();

		var mapview = document.getElementById("mapview");
		on(mapview, touch.press, function (e) {
			console.log('down', e);
		});
		on(mapview, touch.release, function (e) {
			console.log('up (this event is almost always absent on IE11-windows)', e);
		});

	});

I would recommend the second solution.

comment:9 Changed 4 years ago by dylan

Milestone: tbd1.11
Owner: changed from Eric Durocher to thomasneirynck
Status: assignedpending

@thomasneirynck, does the proposed fix solve the issue for you?

comment:10 Changed 4 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Note: See TracTickets for help on using tickets.