Как ограничить область для клика? JS

189

02 апреля 2018, 22:04

Суть скрипта в том, что квадрат перемещается туда где был совершен клик, но здесь есть два ползунка, если по ним совершить клик, то есть задействовать эти ползунки то квадрат наезжает на них, хотелось бы, чтобы квадрат оставался на месте, если совершается клик по формам, как это можно исправить?

  var rotator = document.getElementById("rotator"); 
        var square = document.getElementById("square"); 
        rotator.onchange = function() { 
            window.onmousemove = function() { 
                square.style.transform = "rotate(" + rotator.value + "deg)"; 
            } 
        } 
 
        var mastab = document.getElementById("mastab"); 
        mastab.onchange = function() { 
            window.onmousemove = function() { 
                square.style.transform = "scale(" + mastab.value + "," + mastab.value + ")"; 
            } 
        } 
        window.addEventListener('click', go); 
 
        function go(event) { 
 
 
            var elem = document.getElementById('square'); 
            elem.style.left = event.clientX + 'px'; 
            elem.style.top = event.clientY + 'px'; 
            document.getElementById('koordinat').innerHTML = elem.style.left + " " + elem.style.top; 
        }

 body { 
            height: 800px; 
            margin: 0px; 
        } 
 
        #rotator { 
            margin: 20px; 
            width: 200px; 
        } 
 
        #mastab { 
            margin: 20px; 
            width: 200px; 
        } 
 
        #square { 
 
            border: 1px solid red; 
            width: 100px; 
            height: 100px; 
            position: fixed; 
            top: 100px; 
            left: 0; 
            transform: scale(10px, 10px) 
        }

<input id="rotator" type="range" min="-359" max="359"> 
    <input id="mastab" type="range" min="0.25" max="10"> 
    <div id="koordinat"></div> 
 
    <div id="square"> </div>

Answer 1

©Как ограничить область для клика? JS

завести переменную минимум максимум

©квадрат наезжает

чтобы квадрат не наезжал, нужно его понизить через css z-index

let minMax = [100, 450] 
 
var rotator = document.getElementById("rotator"); 
var square = document.getElementById("square"); 
rotator.onchange = function() { 
  window.onmousemove = function() { 
    square.style.transform = "rotate(" + rotator.value + "deg)"; 
  } 
} 
 
var mastab = document.getElementById("mastab"); 
mastab.onchange = function() { 
  window.onmousemove = function() { 
    square.style.transform = "scale(" + mastab.value + "," + mastab.value + ")"; 
  } 
} 
window.addEventListener('click', go); 
 
function go(event) { 
 
  let x = event.clientX 
  let y = event.clientY 
  let isOkX = minMax[0] < x && x < minMax[1] 
  let isOkY = minMax[0] < y && y < minMax[1] 
  if (!isOkX || !isOkY) return; 
 
  var elem = document.getElementById('square'); 
  elem.style.left = x + 'px'; 
  elem.style.top = y + 'px'; 
  document.getElementById('koordinat').innerHTML = elem.style.left + " " + elem.style.top; 
}

body { 
  height: 800px; 
  margin: 0px; 
} 
 
#rotator { 
  margin: 20px; 
  width: 200px; 
} 
 
#mastab { 
  margin: 20px; 
  width: 200px; 
} 
 
#square { 
  border: 1px solid red; 
  width: 100px; 
  height: 100px; 
  position: fixed; 
  top: 100px; 
  left: 0; 
  transform: scale(10px, 10px); 
} 
 
#square { 
  /* 
			отрицательное значение z-index позволяет сочетать с position: fixed; 
			 */ 
  z-index: -1; 
}

<input id="rotator" type="range" min="-359" max="359"> 
<input id="mastab" type="range" min="0.25" max="10"> 
<div id="koordinat"></div> 
 
<div id="square"> </div>