d3-drag doesn't work in Chrome's mobile test mode

[nicolas-van]

I'm using Chrome 60.

To reproduce open the developers tools (Menu -> More Tools -> Developper Tools) then "Toggle device toolbar", then choose a device (as example: Ipad). Then open any examples for d3 drag (like this one).

It simply doesn't work anymore. As far as I can read d3 should support touch events, which Chrome is using to emulate its mobile test mode.

[mbostock]

The problem with the mobile device emulator is that it doesn’t pass our test for touch support:

d3-drag/src/drag.js

Lines 21 to 23 in 44af703

	function touchable() {
	return "ontouchstart" in this;
	}

It seems that if you enable the device emulator and then reload, the top-level window does pass: "ontouchstart" in window is true. However, the same test is false for HTML elements such as the BODY and the CANVAS, so D3 assumes that touch events are unsupported and does not register touch event listeners. (See 870498d #35 for context.)

Curiously enough, you also can’t assign a touch event listener using element.ontouchstart in the device emulator. You can however use element.addEventListener for touchstart events!

So, I consider this a bug in Chrome’s device emulator. If it’s not possible to detect whether touch may be possible, then we’d have to go back to always registering touch event listeners, which would then cause a passive event listener warning.

[nicolas-van]

OK. It's probably linked to the fact that touch events are still in level 2.

Since it's still a bit problematic, may I propose to add an option to allow overriding the autodetection ? See pull request #42 .

I tested it in my project and it seems to work perfectly when enabling the touch events in Chrome.

[mbostock]

Released drag.touchable in 1.2.0. Thanks!