cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed false clicks on touch devices bugs, closed #485

Browse Source
This commit is contained in:
mourner 2012-02-21 14:58:01 +02:00
parent 96e29ee3e9
commit 60f96281e7
9 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -49,6 +49,8 @@ An in-progress version being developed on the master branch.
### Bug fixes
* Fixed a bug with false map click events on pinch-zoom and zoom/layers controls click. [#485](https://github.com/CloudMade/Leaflet/issues/485)
* Fixed a bug where touching the map with two or more fingers simultaneously would raise an error.
* Fixed inability to use scrolled content inside popup due to mouse wheel propagation.
* Fixed a bug where popup close button wouldn't work on manually added popups. [#423](https://github.com/CloudMade/Leaflet/issues/423)
* Fixed a bug where popup size was calculated incorrectly in IE.

20
debug/map/map-mobile.html
View File

@ -20,23 +20,15 @@
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map').addLayer(cloudmade);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
map.on('locationfound', function(e) {
var marker = new L.Marker(e.latlng);
map.addLayer(marker);
var marker = new L.Marker(latlng);
map.addLayer(marker);
marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
});
map.on('locationerror', function(e) {
alert(e.message);
map.fitWorld();
});
map.locateAndSetView();
marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
</script>
</body>
</html>

2
debug/map/map.html
View File

@ -26,6 +26,8 @@
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
//map.on('click', function () { alert('hi'); });
var markers = new L.FeatureGroup();
function populate() {

35
dist/leaflet-src.js vendored
View File

@ -2506,6 +2506,7 @@ L.Popup = L.Class.extend({
map._panes.popupPane.appendChild(this._container);
map.on('viewreset', this._updatePosition, this);
if (map.options.closePopupOnClick) {
map.on('preclick', this._close, this);
}
@ -2521,7 +2522,7 @@ L.Popup = L.Class.extend({
L.Util.falseFn(this._container.offsetWidth);
map.off('viewreset', this._updatePosition, this)
.off('click', this._close, this);
.off('preclick', this._close, this);
this._container.style.opacity = '0';
@ -2541,9 +2542,9 @@ L.Popup = L.Class.extend({
},
_close: function () {
// TODO popup should be able to close itself
if (this._map) {
this._map.closePopup();
this._map._popup = null;
this._map.removeLayer(this);
}
},
@ -4437,7 +4438,10 @@ L.Draggable = L.Class.extend({
return;
}
this._simulateClick = true;
if (e.touches && e.touches.length > 1) {
this._simulateClick = false;
return;
}
@ -4495,7 +4499,7 @@ L.Draggable = L.Class.extend({
},
_onUp: function (e) {
if (e.changedTouches) {
if (this._simulateClick && e.changedTouches) {
var first = e.changedTouches[0],
el = first.target,
dist = (this._newPos && this._newPos.distanceTo(this._startPos)) || 0;
@ -4795,7 +4799,7 @@ L.Map.TouchZoom = L.Handler.extend({
_onTouchStart: function (e) {
var map = this._map;
if (!e.touches || e.touches.length !== 2 || map._animatingZoom) { return; }
if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming) { return; }
var p1 = map.mouseEventToContainerPoint(e.touches[0]),
p2 = map.mouseEventToContainerPoint(e.touches[1]),
@ -4821,6 +4825,14 @@ L.Map.TouchZoom = L.Handler.extend({
var map = this._map;
var p1 = map.mouseEventToContainerPoint(e.touches[0]),
p2 = map.mouseEventToContainerPoint(e.touches[1]);
this._scale = p1.distanceTo(p2) / this._startDist;
this._delta = p1.add(p2).divideBy(2, true).subtract(this._startCenter);
if (this._scale === 1) { return; }
if (!this._moved) {
map._mapPane.className += ' leaflet-zoom-anim';
@ -4832,12 +4844,6 @@ L.Map.TouchZoom = L.Handler.extend({
this._moved = true;
}
var p1 = map.mouseEventToContainerPoint(e.touches[0]),
p2 = map.mouseEventToContainerPoint(e.touches[1]);
this._scale = p1.distanceTo(p2) / this._startDist;
this._delta = p1.add(p2).divideBy(2, true).subtract(this._startCenter);
// Used 2 translates instead of transform-origin because of a very strange bug -
// it didn't count the origin on the first touch-zoom but worked correctly afterwards
@ -5287,9 +5293,7 @@ L.Control.Zoom = L.Control.extend({
link.title = title;
link.className = className;
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(link);
}
L.DomEvent.addListener(link, 'click', L.DomEvent.stopPropagation);
L.DomEvent.addListener(link, 'click', L.DomEvent.preventDefault);
L.DomEvent.addListener(link, 'click', fn, context);
@ -5424,8 +5428,11 @@ L.Control.Layers = L.Control.extend({
_initLayout: function () {
this._container = L.DomUtil.create('div', 'leaflet-control-layers');
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(this._container);
} else {
L.DomEvent.addListener(this._container, 'click', L.DomEvent.stopPropagation);
}
this._form = L.DomUtil.create('form', 'leaflet-control-layers-list');

2
dist/leaflet.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/control/Control.Layers.js
View File

@ -53,8 +53,11 @@ L.Control.Layers = L.Control.extend({
_initLayout: function () {
this._container = L.DomUtil.create('div', 'leaflet-control-layers');
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(this._container);
} else {
L.DomEvent.addListener(this._container, 'click', L.DomEvent.stopPropagation);
}
this._form = L.DomUtil.create('form', 'leaflet-control-layers-list');

4
src/control/Control.Zoom.js
View File

@ -22,9 +22,7 @@ L.Control.Zoom = L.Control.extend({
link.title = title;
link.className = className;
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(link);
}
L.DomEvent.addListener(link, 'click', L.DomEvent.stopPropagation);
L.DomEvent.addListener(link, 'click', L.DomEvent.preventDefault);
L.DomEvent.addListener(link, 'click', fn, context);

5
src/dom/Draggable.js
View File

@ -39,7 +39,10 @@ L.Draggable = L.Class.extend({
return;
}
this._simulateClick = true;
if (e.touches && e.touches.length > 1) {
this._simulateClick = false;
return;
}
@ -97,7 +100,7 @@ L.Draggable = L.Class.extend({
},
_onUp: function (e) {
if (e.changedTouches) {
if (this._simulateClick && e.changedTouches) {
var first = e.changedTouches[0],
el = first.target,
dist = (this._newPos && this._newPos.distanceTo(this._startPos)) || 0;

16
src/map/handler/Map.TouchZoom.js
View File

@ -14,7 +14,7 @@ L.Map.TouchZoom = L.Handler.extend({
_onTouchStart: function (e) {
var map = this._map;
if (!e.touches || e.touches.length !== 2 || map._animatingZoom) { return; }
if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming) { return; }
var p1 = map.mouseEventToContainerPoint(e.touches[0]),
p2 = map.mouseEventToContainerPoint(e.touches[1]),
@ -40,6 +40,14 @@ L.Map.TouchZoom = L.Handler.extend({
var map = this._map;
var p1 = map.mouseEventToContainerPoint(e.touches[0]),
p2 = map.mouseEventToContainerPoint(e.touches[1]);
this._scale = p1.distanceTo(p2) / this._startDist;
this._delta = p1.add(p2).divideBy(2, true).subtract(this._startCenter);
if (this._scale === 1) { return; }
if (!this._moved) {
map._mapPane.className += ' leaflet-zoom-anim';
@ -51,12 +59,6 @@ L.Map.TouchZoom = L.Handler.extend({
this._moved = true;
}
var p1 = map.mouseEventToContainerPoint(e.touches[0]),
p2 = map.mouseEventToContainerPoint(e.touches[1]);
this._scale = p1.distanceTo(p2) / this._startDist;
this._delta = p1.add(p2).divideBy(2, true).subtract(this._startCenter);
// Used 2 translates instead of transform-origin because of a very strange bug -
// it didn't count the origin on the first touch-zoom but worked correctly afterwards