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

Question

我寻找了许多类似的问题，但无法解决我的问题。 在这里，我仅粘贴了我代码中的一个列表项。我需要在span项目上的mousemove事件上创建一个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。就此问题的摘要而言，显示问题甚至更糟。

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

Answer 1

我不是100％确定要在何处放置span元素，但是您的代码中有一些问题需要首先纠正。然后，该元素的位置相对容易更改。

首先，将span元素附加到mousemove函数中，并且每次触发事件时，它们就会检查一下span是否已经存在。更改为使用mouseenter事件进行span创建。其次，在移动鼠标时，为链接链接添加了一个新的mouseleave处理程序。与之前相同，在mousemove事件之外创建该处理程序。

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

[在放置元素时请记住，该计算基于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>

Answer 2

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

我试图尽可能地保留您的代码，并仅更改引起问题的原因。

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>