在传单上覆盖div无法点击通过

Question

如何在传单地图上覆盖div而不是点击通过？我设置 我试图pointer-events: none和auto，在覆盖div，但没有帮助。设置pointer-events到none了该radiobutton无法点击了效果......

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer. 
 
// Creating a tile layer usually involves setting the URL template for the tile images 
 
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
 
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', 
 
    osm = L.tileLayer(osmUrl, { 
 
    maxZoom: 18, 
 
    attribution: osmAttrib 
 
    }); 
 

 
// initialize the map on the "map" div with a given center and zoom 
 
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm); 
 

 
// Script for adding marker on map click 
 
function onMapClick(e) { 
 

 
    var marker = L.marker(e.latlng, { 
 
     draggable: true, 
 
     title: "Resource location", 
 
     alt: "Resource Location", 
 
     riseOnHover: true 
 
    }).addTo(map) 
 
    .bindPopup(e.latlng.toString()).openPopup(); 
 

 
    // Update marker on changing it's position 
 
    marker.on("dragend", function(ev) { 
 

 
    var chagedPos = ev.target.getLatLng(); 
 
    this.bindPopup(chagedPos.toString()).openPopup(); 
 

 
    }); 
 
} 
 

 
map.on('click', onMapClick);

#map { 
 
    height: 500px; 
 
    width: 80%; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    height: 500px; 
 
    width: 100px; 
 
    position: absolute; 
 
    right: 0px; 
 
    z-index: 2; 
 
    background-color: rgba(255, 50, 50, 0.5); 
 
    pointer-events: auto; 
 
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 
 
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" /> 
 

 
<div id="map"> 
 
    <div class = "overlay"> 
 
    <input type="radio" class = "someButton">Foo Bar 
 
    </div> 
 
</div>

Answer 1

移动覆盖DIV地图元素之外：

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer. 
 
// Creating a tile layer usually involves setting the URL template for the tile images 
 
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
 
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', 
 
    osm = L.tileLayer(osmUrl, { 
 
    maxZoom: 18, 
 
    attribution: osmAttrib 
 
    }); 
 

 
// initialize the map on the "map" div with a given center and zoom 
 
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm); 
 

 
// Script for adding marker on map click 
 
function onMapClick(e) { 
 

 
    var marker = L.marker(e.latlng, { 
 
     draggable: true, 
 
     title: "Resource location", 
 
     alt: "Resource Location", 
 
     riseOnHover: true 
 
    }).addTo(map) 
 
    .bindPopup(e.latlng.toString()).openPopup(); 
 

 
    // Update marker on changing it's position 
 
    marker.on("dragend", function(ev) { 
 

 
    var chagedPos = ev.target.getLatLng(); 
 
    this.bindPopup(chagedPos.toString()).openPopup(); 
 

 
    }); 
 
} 
 

 
map.on('click', onMapClick);

.container { 
 
    position: relative; 
 
    width: 500px; 
 
} 
 
#map { 
 
    height: 500px;  
 
} 
 

 
.overlay {  
 
    width: 100px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0;  
 
    background-color: rgba(255, 50, 50, 0.5);  
 
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 
 
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div id="map"></div> 
 
    <div class = "overlay"> 
 
     <input type="radio" class = "someButton">Foo Bar 
 
    </div> 
 
</div>

Answer 2

你可以将你的覆盖DIV外地图，然后将其放置它使用negative margins上方z-index的。在这里你去：

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer. 
 
// Creating a tile layer usually involves setting the URL template for the tile images 
 
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
 
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', 
 
    osm = L.tileLayer(osmUrl, { 
 
    maxZoom: 18, 
 
    attribution: osmAttrib 
 
    }); 
 

 
// initialize the map on the "map" div with a given center and zoom 
 
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm); 
 

 
// Script for adding marker on map click 
 
function onMapClick(e) { 
 

 
    var marker = L.marker(e.latlng, { 
 
     draggable: true, 
 
     title: "Resource location", 
 
     alt: "Resource Location", 
 
     riseOnHover: true 
 
    }).addTo(map) 
 
    .bindPopup(e.latlng.toString()).openPopup(); 
 

 
    // Update marker on changing it's position 
 
    marker.on("dragend", function(ev) { 
 

 
    var chagedPos = ev.target.getLatLng(); 
 
    this.bindPopup(chagedPos.toString()).openPopup(); 
 

 
    }); 
 
} 
 

 
map.on('click', onMapClick);

#map { 
 
    height: 500px; 
 
    width: 100%; 
 
    float: left; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    height: 500px; 
 
    width: 100px; 
 
    margin-left: -100px; 
 
    position: relative; 
 
    float: right; 
 
    z-index: 2; 
 
    background-color: rgba(255, 50, 50, 0.5); 
 
    pointer-events: auto; 
 
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 
 
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" /> 
 

 
<div id="map"> 
 
</div> 
 

 
<div class="overlay"> 
 
    <input type="radio" class = "someButton">Foo Bar 
 
</div>

Answer 3

尝试使用此方法阻止点击事件传播到低层同时保持pointer-events: auto;

<div class = "overlay" onclick="alert(event);event.stopPropagation();"> 

这里我用event.stopPropagation();内联，但是你可以在你的JS中使用一个函数。

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer. 
 
// Creating a tile layer usually involves setting the URL template for the tile images 
 
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
 
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', 
 
    osm = L.tileLayer(osmUrl, { 
 
    maxZoom: 18, 
 
    attribution: osmAttrib 
 
    }); 
 

 
// initialize the map on the "map" div with a given center and zoom 
 
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm); 
 

 
// Script for adding marker on map click 
 
function onMapClick(e) { 
 

 
    var marker = L.marker(e.latlng, { 
 
     draggable: true, 
 
     title: "Resource location", 
 
     alt: "Resource Location", 
 
     riseOnHover: true 
 
    }).addTo(map) 
 
    .bindPopup(e.latlng.toString()).openPopup(); 
 

 
    // Update marker on changing it's position 
 
    marker.on("dragend", function(ev) { 
 

 
    var chagedPos = ev.target.getLatLng(); 
 
    this.bindPopup(chagedPos.toString()).openPopup(); 
 

 
    }); 
 
} 
 

 
map.on('click', onMapClick);

#map { 
 
    height: 500px; 
 
    width: 80%; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    height: 500px; 
 
    width: 100px; 
 
    position: absolute; 
 
    right: 0px; 
 
    z-index: 2; 
 
    background-color: rgba(255, 50, 50, 0.5); 
 
    pointer-events: auto; 
 
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 
 
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" /> 
 

 
<div id="map"> 
 
    <div class = "overlay" onclick='console.log("Event: "+ event.type);event.stopPropagation();'> 
 
    <input type="radio" class = "someButton">Foo Bar 
 
    </div> 
 
</div>