改变相对于鼠标指针的位置

Question

我寻找了许多类似的问题，但无法解决我的问题。 这里我只粘贴了我的代码中的一个列表项。我需要在 mousemove 事件上创建 span list 项目，并在鼠标移动时从其父项设置其 left-offset。因为我从来没有尝试过这样的事情，所以我用代码做了很多实验来实现这个-

document.querySelector("li a").addEventListener("mousemove",(event)=> {

			let span;
			let alreadyHasSpan =    event.target.hasChildNodes().length > 1; //default length=1

			if(!alreadyHasSpan) {
				span = $(`<span class="a-effect"></span>`);
				span.appendTo(event.target);
			}

			let targetLeftPos = event.target.getBoundingClientRect().left;

				span.css("left",`${event.clientX-targetLeftPos}px`);


			$(this).mouseleave(function () { 
				span.remove();
			});
}, false);

a {
  position: relative;
}
.a-effect {
	position: absolute; left: 0;
	height: 100%;
	width: 2%;
	background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="nav-item active">
		<a href="/" class="nav-link">Product</a>	
</li>

在我的浏览器上，span 移动但后面有尾随标志-

除了尾随标志外，经常会错过显示span。在这个问题的sn-ps上，显示问题就更糟了。

出了什么问题，我该如何解决？

Answer 1

根据您的问题，问题是每次鼠标移动时您都会添加一个新的跨度。我猜您只想在鼠标进入时添加它，并在鼠标离开时将其删除。

我已尝试尽可能多地保留您的代码，并且只更改导致您的问题的原因。

document.querySelector("li a").addEventListener("mouseenter", (event) => {

  let span;
  let alreadyHasSpan = event.target.childNodes.length > 1; //default length=1

  if (!alreadyHasSpan) {
    span = $(`<span class="a-effect"></span>`);
    span.appendTo(event.target);
  }
});

document.querySelector("li a").addEventListener("mousemove", (event) => {
  let targetLeftPos = event.target.getBoundingClientRect().left;
  if (event.target.childNodes.length > 1) {
    let span = event.target.childNodes[1];
    $(span).css("left", `${event.clientX-targetLeftPos}px`);
  }
});

document.querySelector("li a").addEventListener("mouseleave", (event) => {
  if (event.target.childNodes.length > 1) {
    let span = event.target.childNodes[1];
    span.remove();
  }
});

a {
  position: relative;
}

.a-effect {
  position: absolute;
  left: 0;
  height: 100%;
  width: 2%;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="nav-item active">
  <a href="/" class="nav-link">Product</a>
</li>

Answer 2

我不能 100% 确定您想将 span 元素放在哪里，但您的代码中存在一些问题，我会先纠正这些问题。那么元素的位置就比较容易改变了。

首先，您将 span 元素附加到 mousemove 函数中，并且他们在每次触发该事件时检查 span 是否已经存在。将其更改为使用mouseenter 事件来创建span。 其次，您在移动鼠标时为您的链接添加一个新的 mouseleave 处理程序。和以前一样，在 mousemove 事件之外创建该处理程序。

关于元素的位置，我不确定您希望它出现/跟随鼠标的位置，但您可以轻松地在我的 moveSpan() 函数中调整 offsetX 和 offsetY 变量以使其适应您的需求.

请记住，在定位元素时，计算是基于 a 元素的位置。

function moveSpan( e ) {
	let $el = $(e.target);
	let xPos = e.pageX;
  let yPos = e.pageY;
  let offsetX = $el.width() / 2;
  let offsetY = $el.height() / 2;
  let $span = $el.find('span');
 	$span.css({
    'left': (xPos - offsetX) + 'px',
    'top': (yPos - offsetY) + 'px'
  });
}

$('li a').on('mouseenter', function( e ) {
	let span = $('<span />').addClass('a-effect');
  $(this).append( span );
  moveSpan( e );
}).on('mousemove', function( e ) {
	moveSpan( e );
}).on('mouseleave', function( e ) {
	$(this).find('span').remove();
});

ul {
  list-style-type: none;
}
a {
  position: relative;
}

.a-effect {
  position: absolute;
  height: 100%;
  width: 10px;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item active">
    <a href="/" class="nav-link">Product</a>
  </li>
</ul>