在傳單上覆蓋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>