this commit fixes #2499

debug/tests/click_on_canvas.html

@@ -35,7 +35,7 @@
                 opacity: 1,
                 smoothFactor: 1,
                 color: 'red',
-                clickable:true
+                interactive:true
             }));
 
             polygons.on('click', function(m) {

debug/tests/svg_clicks.html

@@ -43,7 +43,7 @@
 	    [51, 7.000],
 	    [51.002, 7.004]
 	  ],
-	  { clickable:false,color:'#f00' }
+	  { interactive:false,color:'#f00' }
 	  ).addTo(map);
 
 	  // when the mouse hovers over the red route2, you cannot click through the blue route1 beneath

dist/leaflet.css

@@ -171,7 +171,7 @@
 
 /* cursors */
 
-.leaflet-clickable {
+.leaflet-interactive {
 	cursor: pointer;
 	}
 .leaflet-container {
@@ -179,7 +179,7 @@
 	cursor:    -moz-grab;
 	}
 .leaflet-crosshair,
-.leaflet-crosshair .leaflet-clickable {
+.leaflet-crosshair .leaflet-interactive {
 	cursor: crosshair;
 	}
 .leaflet-popup-pane,
@@ -187,7 +187,7 @@
 	cursor: auto;
 	}
 .leaflet-dragging .leaflet-container,
-.leaflet-dragging .leaflet-clickable {
+.leaflet-dragging .leaflet-interactive {
 	cursor: move;
 	cursor: -webkit-grabbing;
 	cursor:    -moz-grabbing;

src/layer/marker/Marker.js

@@ -10,7 +10,7 @@ L.Marker = L.Layer.extend({
 		icon: new L.Icon.Default(),
 		// title: '',
 		// alt: '',
-		clickable: true,
+		interactive: true,
 		// draggable: false,
 		keyboard: true,
 		zIndexOffset: 0,
@@ -201,9 +201,9 @@ L.Marker = L.Layer.extend({
 
 	_initInteraction: function () {
 
-		if (!this.options.clickable) { return; }
+		if (!this.options.interactive) { return; }
 
-		L.DomUtil.addClass(this._icon, 'leaflet-clickable');
+		L.DomUtil.addClass(this._icon, 'leaflet-interactive');
 
 		L.DomEvent.on(this._icon, 'click dblclick mousedown mouseup mouseover mousemove mouseout contextmenu keypress',
 				this._fireMouseEvent, this);

src/layer/vector/Canvas.js

@@ -207,12 +207,12 @@ L.Canvas = L.Renderer.extend({
 	},
 
 	_handleHover: function (layer, e, point) {
-		if (!layer.options.clickable) { return; }
+		if (!layer.options.interactive) { return; }
 
 		if (layer._containsPoint(point)) {
 			// if we just got inside the layer, fire mouseover
 			if (!layer._mouseInside) {
-				L.DomUtil.addClass(this._container, 'leaflet-clickable'); // change cursor
+				L.DomUtil.addClass(this._container, 'leaflet-interactive'); // change cursor
 				layer._fireMouseEvent(e, 'mouseover');
 				layer._mouseInside = true;
 			}
@@ -221,7 +221,7 @@ L.Canvas = L.Renderer.extend({
 
 		} else if (layer._mouseInside) {
 			// if we're leaving the layer, fire mouseout
-			L.DomUtil.removeClass(this._container, 'leaflet-clickable');
+			L.DomUtil.removeClass(this._container, 'leaflet-interactive');
 			layer._fireMouseEvent(e, 'mouseout');
 			layer._mouseInside = false;
 		}

src/layer/vector/Path.js

@@ -19,7 +19,7 @@ L.Path = L.Layer.extend({
 		fillOpacity: 0.2,
 
 		// className: ''
-		clickable: true
+		interactive: true
 	},
 
 	onAdd: function () {

src/layer/vector/SVG.js

@@ -56,8 +56,8 @@ L.SVG = L.Renderer.extend({
 			L.DomUtil.addClass(path, layer.options.className);
 		}
 
-		if (layer.options.clickable) {
-			L.DomUtil.addClass(path, 'leaflet-clickable');
+		if (layer.options.interactive) {
+			L.DomUtil.addClass(path, 'leaflet-interactive');
 		}
 
 		this._updateStyle(layer);
@@ -116,7 +116,7 @@ L.SVG = L.Renderer.extend({
 			path.setAttribute('fill', 'none');
 		}
 
-		path.setAttribute('pointer-events', options.pointerEvents || (options.clickable ? 'visiblePainted' : 'none'));
+		path.setAttribute('pointer-events', options.pointerEvents || (options.interactive ? 'visiblePainted' : 'none'));
 	},
 
 	_updatePoly: function (layer, closed) {