移动用户输入滑块以突出显示 html 嵌入元素时,有没有办法避免鼠标?

问题描述 投票:0回答:1

现在这是我的网站。还没什么。只有谷歌地图和用户输入滑块。如果您将向左/向右移动滑块并在拖动它的同时向上/向下拖动鼠标,您会看到这就像选择突出显示地图一样。

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>

但问题依然存在

javascript html css velo
1个回答
1
投票

鼠标按下你需要做这样的事情:

// 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>

© www.soinside.com 2019 - 2024. All rights reserved.