Как хэндлить движение мыши над объектом?

Question

[Albert Kazan]

var x, i, j, selElmnt, b, c;
	x = document.querySelectorAll('button.xver.material');
	for (i = 0; i < x.length; i++) {
		var a = document.createElement('div');
		a.setAttribute('class', 'light');
		x[i].appendChild(a);
		var br = x[i].getBoundingClientRect();
		var pcx = br.left;
		var pcy = br.top;
		var pxw = br.width;
		var pxh = br.height;
		
		var primaryLength = pxw;
		if (pxh > pxw) primaryLength = pxh;
		a.style.width = primaryLength / 2;
		a.style.height = primaryLength / 2;
		console.log(pxw);
		var light = a;
		x[i].onmouseenter = function(e) {
			console.log('shit');
		}
		x[i].addEventListener('mousemove', function(e) {
			light.style.display = 'block';
			var cx = e.x - pcx - (primaryLength / 4);
			var cy = e.y - pcy - (primaryLength / 4);
			light.style.left = cx + 'px';
			light.style.top = cy + 'px';
		//	console.log(cx);
		}, false);
		x[i].onmouseout = function(e) {
			a.style.display = 'none';
		}
	}

Вроде бы на каждый элемент из селектора создается по "ребенку" и прикрепляется событие на управление созданным "ребенком". Но на деле, при движении мыши на любой кнопке, двигается "ребенок" только одного из всех.

Answer 1

[Владимир Проскурин]

У вас var light = a; в конце цикла становится последним блоком, и в функции события берется light, который равен последнему блоку.
Пишите либо так

var x, i, j, selElmnt, b, c;
  x = document.querySelectorAll('button.xver.material');
  for (i = 0; i < x.length; i++) {
    var a = document.createElement('div');
    a.setAttribute('class', 'light');
    x[i].appendChild(a);
    var br = x[i].getBoundingClientRect();
    var pcx = br.left;
    var pcy = br.top;
    var pxw = br.width;
    var pxh = br.height;
    
    var primaryLength = pxw;
    if (pxh > pxw) primaryLength = pxh;
    a.style.width = primaryLength / 2;
    a.style.height = primaryLength / 2;
    console.log(pxw);
    let light = a; // let вместо var
    x[i].onmouseenter = function(e) {
      console.log('shit');
    }
    x[i].addEventListener('mousemove', function(e) {
      light.style.display = 'block';
      var cx = e.x - pcx - (primaryLength / 4);
      var cy = e.y - pcy - (primaryLength / 4);
      light.style.left = cx + 'px';
      light.style.top = cy + 'px';
    //	console.log(cx);
    }, false);
    x[i].onmouseout = function(e) {
      a.style.display = 'none';
    }
  }

Либо так

var x, i, j, selElmnt, b, c;
  x = document.querySelectorAll('button.xver.material');
  for (i = 0; i < x.length; i++) {
    var a = document.createElement('div');
    a.setAttribute('class', 'light');
    x[i].appendChild(a);
    var br = x[i].getBoundingClientRect();
    var pcx = br.left;
    var pcy = br.top;
    var pxw = br.width;
    var pxh = br.height;
    
    var primaryLength = pxw;
    if (pxh > pxw) primaryLength = pxh;
    a.style.width = primaryLength / 2;
    a.style.height = primaryLength / 2;
    console.log(pxw);
    var light = a; 
    (function(light) { // Сохраняем в замыкании текущий блок
    x[i].onmouseenter = function(e) {
      console.log('shit');
    }
    x[i].addEventListener('mousemove', function(e) {
      light.style.display = 'block';
      var cx = e.x - pcx - (primaryLength / 4);
      var cy = e.y - pcy - (primaryLength / 4);
      light.style.left = cx + 'px';
      light.style.top = cy + 'px';
    //	console.log(cx);
    }, false);
    x[i].onmouseout = function(e) {
      a.style.display = 'none';
    }
    })(light);
  }

UPD: Еще primaryLength, pcx и pcy у всех один, но с ними попробуйте на моем примере разобраться сами.

Comments

[Albert Kazan]

let помог!
после вопроса обнаружил, что i сохраняется.