现在这是我的网站。还没什么。只有谷歌地图和用户输入滑块。如果您将向左/向右移动滑块并在拖动它的同时向上/向下拖动鼠标,您会看到这就像选择突出显示地图一样。
https://rhodan.wixsite.com/my-site-1
问题是当我将滑块向左或向右移动时,如果鼠标稍微离开滑块向上或向下,它会突出显示 html 元素。
就像在滑块上拖动鼠标来更改滑块值时,有时它也会突出显示 html 元素。
我尝试了 john 解决方案并在 wix 中将答案部分添加到我的 html 嵌入代码中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Maps Api</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>
<body>
<div id="map"></div>
<style type="text/css">
body {
overflow: hidden;
}
</style>
<style>#map
{
width: 1500px;
height:900px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#map.fullscreen {
position: fixed;
width:100%;
height: 100%;
}</style>
<script
src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly&language=he"
defer
></script>
<script>let map;
function initMap() {
// The location of Uluru
const uluru = { lat: 32.1582615544072, lng: 34.89155037133181 };
// The map, centered at Uluru
map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: uluru,
disableDefaultUI: true,
fullscreenControl: true,
options: {
gestureHandling: 'greedy'
}
});
// Create the DIV to hold the control.
const centerControlDiv = document.createElement("div");
// Create the control.
const centerControl = createCenterControl(map);
// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
const chicago = { lat: 41.85, lng: -87.65 };
/**
* Creates a control that recenters the map on Chicago.
*/
function createCenterControl(map) {
const controlButton = document.createElement("button");
// Set CSS for the control.
controlButton.style.backgroundColor = "#fff";
controlButton.style.border = "2px solid #fff";
controlButton.style.borderRadius = "3px";
controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
controlButton.style.color = "rgb(25,25,25)";
controlButton.style.cursor = "pointer";
controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
controlButton.style.fontSize = "16px";
controlButton.style.lineHeight = "28px";
controlButton.style.borderLeftWidth = "8px";
controlButton.style.margin = "8px 8px 22px 0";
controlButton.style.padding = "0 5px";
controlButton.style.textAlign = "center";
controlButton.textContent = "Center Map";
controlButton.title = "Click to recenter the map";
controlButton.type = "button";
// Setup the click event listeners: simply set the map to Chicago.
controlButton.addEventListener("click", () => {
map.setCenter(chicago);
});
return controlButton;
}
const rectangle = new google.maps.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: {
north: uluru.lat - 0.005,
south: uluru.lat + 0.005,
west: uluru.lng - 0.005,
east: uluru.lng + 0.005,
},
});
}
window.initMap = initMap;</script>
<script>function dontSelectAnything(evt) {
evt.preventDefault();
}
const slider = document.getElementById("slider1");
slider.addEventListener('mousedown', (evt) => {
document.addEventListener('selectstart', dontSelectAnything);
}
slider.addEventListener('mouseup', (evt) => {
document.removeEventListener('selectstart' dontSelectAnything);
}</script>
<input id="slider1" type="range">
<p>You should not be able to select me when you click above slider and drag the mouse around</p>
</body>
</html>
这是解决方案的一部分:
<script>function dontSelectAnything(evt) {
evt.preventDefault();
}
const slider = document.getElementById("slider1");
slider.addEventListener('mousedown', (evt) => {
document.addEventListener('selectstart', dontSelectAnything);
}
slider.addEventListener('mouseup', (evt) => {
document.removeEventListener('selectstart' dontSelectAnything);
}</script>
<input id="slider1" type="range">
<p>You should not be able to select me when you click above slider and drag the mouse around</p>
但问题依然存在
鼠标按下你需要做这样的事情:
// add event
document.addEventListener('selectstart', dontSelectAnything);
在鼠标上移时,您需要将其删除
// remove event
document.removeEventListener('selectstart' dontSelectAnything);
终于...添加这个功能
function dontSelectAnything(evt) {
evt.preventDefault();
}
evt.prevenyDefault() 阻止浏览器执行默认的 selectstart 行为,从而阻止任何选择工作。
概念证明...
function dontSelectAnything(evt) {
evt.preventDefault();
}
const sliders = document.querySelectAll("[data-testid]");
sliders.foreach( (s) => {
s.addEventListener('mousedown', (evt) => {
document.addEventListener('selectstart', dontSelectAnything);
}
s.addEventListener('mouseup', (evt) => {
document.removeEventListener('selectstart' dontSelectAnything);
}
}
<input data-testid="track" type="range">
<p>You should not be able to select me when you click above slider and drag the mouse around</p>